<el-form-item label="产品图片">
<el-upload
action="/api/common/uploadImg"
:headers="requestHeader"
accept=".png, .jpg, .gif, .jpeg"
list-type="picture-card"
:file-list="fileList"
:on-success="handleSuccess"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
</el-form-item>
import { uploadImg } from '@/api/common'
import { getToken } from '@/utils/auth'
data() {
return {
requestHeader: { Authorization: getToken() },
form: {
product_part_json: [],
},
// 图片
dialogImageUrl: '',
dialogVisible: false,
}
computed: {
fileList() {
if (this.form.prod_img) {
return this.form.prod_img.split(',').map((item, key) => {
return { name: `图片${key + 1}`, url: item }
})
}
return []
},
},
// 图片 - 上传成功
handleSuccess(response, file, fileList) {
const imgList = fileList.map((item) => {
if (item.response.code === 200) {
return item.response.data.data.oss_url
}
return ''
})
this.form.prod_img = imgList.join(',')
},
// 图片 - 删除
handleRemove(file, fileList) {
const imgList = fileList.map((item) => {
if (item.response.code === 200) {
return item.response.data.data.oss_url
}
return ''
})
this.form.prod_img = imgList.join(',')
},
// 图片 - 浏览
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},