vue.js图片上传工具代码.zip资源-CSDN文库

共5个文件

png：2个

html：1个

js：1个

版权申诉

jQuery特效

CSS特效

网页特效

169 浏览量 2023-10-15 00:02:28 上传评论收藏 39KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

vue.js图片上传工具代码.zip （5个子文件）

jiaoben7291

vue.min.js 80KB

img

guanbi.png 4KB

jiahao.png 1KB

css

upload-img.css 4KB

index.html 8KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue.js图片上传工具代码 - 【更多源码：www.96flw.com】</title> <meta name="renderer" content="webkit"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <link rel="stylesheet" href="css/upload-img.css"> </head> <body> <div id="app" class="container" v-cloak> <div class="uploading-data" v-if="isUploading"></div> <div class="upload-img-column"> <div class="words">上传图片 ({{imgTempList.length}}/5)</div> <div class="upload-wrap"> <div class="box"> <label class="p dotted"> <input type="file" accept="image/jpg,image/jpeg,image/png" name="file" @change="onChooseImage($event)"> <img src="./img/jiahao.png" alt=""> </label> </div> <template v-for="(imgItem, imgIndex) in imgTempList"> <div class="box"> <div class="p"> <img :src="imgItem"> <div class="delete" @click.stop="deleteImg(imgIndex)"> <img src="./img/guanbi.png" alt=""> </div> </div> </div> </template> </div> </div> <button class="l-btn" @click="onUploadImg">上传</button>  <div class="success-path"> <template v-for="(item, index) in successPath"> <a :href="item" target="_blank">{{item}}</a> </template> </div>  <canvas id="compressCanvas" style="position: fixed; z-index: -1; opacity: 0; top: -100%; left: -100%"></canvas> </div> <script src="js/vue.min.js"></script> <script src="js/axios.min.js"></script> <script> var app = new Vue({ el: '#app', data: { imgTempList: [], //图片临时路径列表 isUploading: false, //是否正在上传 successPath: [], //上传成功后的路径(没必要) }, mounted: function () { var that = this; }, watch: {}, methods: { //选择图片 onChooseImage: function (event) { var that = this; //判断图片数量是否已上限 var currentImgTempArray = that.imgTempList; if (currentImgTempArray.length >= 5) { alert("最多上传5张图片"); return false; } //使用FileReader对文件对象进行操作 var reader = new FileReader(); reader.readAsDataURL(event.target.files[0]); //将读取到的文件编码成Data URL reader.onload = function () { //读取完成时 var replaceSrc = reader.result; //文件输出的内容 //压缩图片处理 var image = new Image(); image.src = replaceSrc; image.onload = function () { //获取图片初始宽高 var width = image.width; var height = image.height; //判断图片宽度，再按比例设置宽度和高度的值 if (width > 1024) { width = 1024; height = Math.ceil(1024 * (image.height / image.width)); } //将图片重新画入canvas中 var canvas = document.getElementById("compressCanvas"); var context = canvas.getContext("2d"); canvas.width = width; canvas.height = height; context.beginPath(); context.fillStyle = "#ffffff"; context.fillRect(0, 0, width, height); context.fill(); context.closePath(); context.drawImage(image, 0, 0, width, height); replaceSrc = canvas.toDataURL("image/jpeg"); //canvas转DataURL(base64格式) //将压缩后的路径追加到临时路径数组中 var totalList = []; if (currentImgTempArray.length > 0) { totalList = currentImgTempArray.concat(replaceSrc); } else { totalList[0] = replaceSrc; } that.imgTempList = totalList; }; }; }, //删除某张图片 deleteImg: function (idx) { var that = this; that.imgTempList.splice(idx, 1); }, //提交上传图片 onUploadImg: function () { var that = this; var imgTempList = that.imgTempList; if (imgTempList.length > 0) { that.isUploading = true; //正在上传显示遮罩层防止连续点击 var countNum = 0; //计算数量用的判断上传到第几张图片了 //map循环遍历上传图片 imgTempList.map(function (imgItem, imgIndex) { var files = that.dataURLtoFile(imgItem, 'pj' + Date.now() + '.jpg'); //DataURL转File //创FormData对象 var formdata = new FormData(); //append(key,value)在数据末尾追加数据。这儿的key值需要和后台定义保持一致 formdata.append('img', files); //用axios上传， axios({ method: "POST", //url: "http://www.clluo.com:8060/uploadImg", url: "http://图片上传路径", data: formdata, headers: { "Content-Type": "multipart/form-data" } }).then(function (res) { console.log(res); countNum++; console.log("第 " + countNum + " 张图片上传完成"); //图片全部上传完后去掉遮罩层 if (countNum >= imgTempList.length) { that.isUploading = false; } //没必要的代码 👇 var list = []; if (that.successPath.length > 0) { list = that.successPath.concat(res.data.path); } else { list[0] = res.data.path; } that.successPath = list; }).catch(function (error) { console.error(error); }); }); } }, /** * 将base64转换为文件 * @dataUrl base64路径地址 * @fileName 自定义文件名字 * */ dataURLtoFile: function (dataUrl, fileName) { var arr = dataUrl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--)

评论收藏

内容反馈

版权申诉