<template> <div> <el-upload ref="imgBroadcastUpload" :auto-upload="false" multiple :file-list="diaLogForm.imgBroadcastList" list-type="picture-card" :on-change="imgBroadcastChange" :on-remove="imgBroadcastRemove" accept="image/jpg,image/png,image/jpeg" action=""> <i></i> <div slot="tip">只能上传jpg/png文件，且不超过2M</div> </el-upload> <el-button>submitData</el-button> </div> </template> <script> import { uploadImgToBase64, URLImgToBase64 } from '@/utils' export default { name: 'imgUpload', data () { return { diaLogForm: { goodsName:'', // 商品名称字段 imgBroadcastList:[], // 储存选中的图片列表 imgsStr:'' // 后端需要的多张图base64字符串 , 分割 } } }, created(){ this.getGoodsData() }, methods: { // 图片选择后 保存在 diaLogForm.imgBroadcastList 对象中 imgBroadcastChange (file, fileList) { const isLt2M = file.size / 1024 / 1024 < 2 // 上传头像图片大小不能超过 2MB if (!isLt2M) { this.diaLogForm.imgBroadcastList = fileList.filter(v => v.uid !== file.uid) this.$message.error('图片选择失败，每张图片大小不能超过 2MB,请重新选择!') } else { this.diaLogForm.imgBroadcastList.push(file) } }, // 有图片移除后 触发 imgBroadcastRemove (file, fileList) { this.diaLogForm.imgBroadcastList = fileList }, // 获取商品原有信息 getGoodsData () { getCommodityById({ cid: this.diaLogForm.id }).then(res => { if (res.status) { Object.assign(this.diaLogForm, res.data) // 把 '1.jpg,2.jpg,3.jpg' 转成[{url:'http://xxx.xxx.xx/j.jpg',...}] 这种格式在upload组件内展示。 imgBroadcastList 展示原有的图片 this.diaLogForm.imgBroadcastList = this.diaLogForm.imgsStr.split(',').map(v => ({ url: this.BASE_URL + 'https://www.jb51.net/' + v })) } }).catch(err => { console.log(err.data) }) }, // 提交弹窗数据 async submitDialogData () { const imgBroadcastListBase64 = [] console.log('图片转base64开始...') this.dialogFormLoading = true // 并发 转码轮播图片list => base64 const filePromises = this.diaLogForm.imgBroadcastList.map(async file => { if (file.raw) { // 如果是本地文件 const response = await uploadImgToBase64(file.raw) return response.result.replace(/.*;base64,/, '') } else { // 如果是在线文件 const response = await URLImgToBase64(file.url) return response.replace(/.*;base64,/, '') } }) // 按次序输出 base64图片 for (const textPromise of filePromises) { imgBroadcastListBase64.push(await textPromise) } console.log('图片转base64结束...') this.diaLogForm.imgs = imgBroadcastListBase64.join() console.log(this.diaLogForm) if (!this.isEdit) { // 新增编辑 公用一个组件。区分接口调用 const res = await addCommodity(this.diaLogForm) // 提交表单 if (res.status) { this.$message.success('添加成功') } } else { const res = await modifyCommodity(this.diaLogForm) // 提交表单 if (res.status) { this.$router.push('/goods/goods-list') this.$message.success('编辑成功') } } } } } </script>
结语
至此常用的三种图片上传方式就介绍完了，转base64方式一般在小型项目中使用，大文件上传还是传统的 formdata或者 云服务，更合适。但是 通过转base64方式也使得，在前端进行图片编辑成为了可能，不需要上传到服务器就能预览。主要收获还是对于异步操作的处理。
总结
以上所述是小编给大家介绍的使用Vue实现图片上传的三种方式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: