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