当前位置: 首页 > Web前端 > vue.js

vue+el-upload+strapi上传图片

时间:2023-03-31 23:56:17 vue.js

vue—模板——内容,点击上传headers:{'Content-Type':'multipart/form-data'},上传方式是直接使用elementUI提供的http-request(覆盖默认上传行为,可以自定义上传实现)。jscontenthandleUpload(item){letformData=newFormData()formData.append('files',item.file,item.file.name)//console.log('formData---',formData.get('files'))axios.post('http://localhost:1337/upload',formData).then(response=>{this.icon=response.data[0].id})},注意:formData.append第一个参数-要写入的文件。原因:后台报错,显示Files为空,修改第一个参数为files即可。直接console.log(formData)没什么,用formData.get('files')或者getAll()把图片上传返回的id挂载到你要关联的字段。注意:应选择媒体作为背景图标的类型。后台配置如下:因为选择的是单一媒体,所以直接赋id即可。如果选择多种媒体,则必须以数组的形式传递值。