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

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 间接赋值就好。
如果抉择的是多种媒体，就要以数组的模式传值。