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

38次阅读

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

正文完
 0