vue 文件(图片)上传

vue 文件(图片)上传

 

 

html~~~~~~

<div>

<a-upload
listType="picture-card"
:fileList="fileList"
@preview="handlePreview"
@change="handleChange"
:before-upload="beforeUpload"
>
<div v-if="fileList.length < 5">
<a-icon type="plus"/>
<div class="ant-upload-text">上传</div>
</div>
</a-upload>
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
<img alt="预览" style="width: 100%" :src="previewImage"/>
</a-modal>
<span @click=‘handleUp‘>上传</div>

</div>

js~~~~~~

function getBase64 (file) {
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = () => resolve(reader.result)
reader.onerror = error => reject(error)
})
}
export default {
data () {
return {
     previewVisible: false,
previewImage: ‘‘,
fileList: [],
fileListIds: [],

}
methods: {
      handleCancel () {
this.previewVisible = false
},
async handlePreview (file) {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj)
}
this.previewImage = file.url || file.preview
this.previewVisible = true
},
handleChange ({ fileList }) { // 图片上传
this.fileList = fileList
const fileIds = fileList.filter(file => file.id).map(file => file.id)
const uploadFiles = fileList.filter(file => file.originFileObj)
if (uploadFiles && uploadFiles.length) {
const formData = new FormData()
uploadFiles.forEach(file => {
formData.append(‘files[]‘, file.originFileObj)
})
this.$fileService.post(this.fileService.getBaseUrl(), formData).then(res => { // 后台文件上传地址
res.forEach(file => {
fileIds.push(file.id)
})
this.fileListIds = fileIds
}).catch(error => {
console.error(error)
this.$message.error(‘文件上传失败‘)
})
}
},
beforeUpload () {
// return false
},
handleUp () {
     const upimgids = this.fileListIds.join(‘,‘)// 这就是上传给后台的图片id
     ......调接口干其他事比如和表格数据一起上传
}

}

}

vue 文件(图片)上传

上一篇:jquery与css控制元素的隐藏和显示的几种方法


下一篇:mysql系列十三、mysql中replace into和duplicate key的使用区