关于前端:vue-elupload-strapi-上传图片

7次阅读

共计 822 个字符，预计需要花费 3 分钟才能阅读完成。

vue—template———内容，

<el-upload
  class="upload-demo"
  action="http://localhost:1337/upload"
  :headers="headers"
  :http-request="handleUpload"
  :file-list="fileList"
  list-type="picture">
  <el-button size="small" type="primary"> 点击上传 </el-button>
</el-upload>

headers: {‘Content-Type’: ‘multipart/form-data’},
对于上传的办法，是间接应用 element UI 提供的 http-request（笼罩默认的上传行为，能够自定义上传的实现）。

js 内容

handleUpload(item){let formData = new FormData()
  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 are empty

将第一个参数批改为 files 就好了。
间接 console.log（formData）是没有货色的，要应用 formData.get(‘files’) 或者 getAll()

将图片上传返回的 id 挂载到你想要关联的字段上。注：后盾 Icon 的类型要选媒体。
后盾配置如下：

因为抉择的是，繁多媒体，所以，id 间接赋值就好。
如果抉择的是多种媒体，就要以数组的模式传值。

正文完