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