实现一个Vue版Upload组件_vue.js_

export default { props: { icon: { //上传组件的占位图 type: String, default: "iconcamera" }, size: { //图片超过指定大小不让上传 type: Number, default: 3072 }, disabled: { //禁止上传 type: Boolean }, iconSize: { //占位icon的大小 type: Number, default: 24 }, name: { //input的原生属性 type: String, default: 'file' }, accept: { //接受上传的文件类型 type: Array, default() { return []; } }, acceptErrorMessage: { //文件类型错误的提示内容 type: String, default: '文件类型错误' }, compress: { //是否开启图片压缩 type: Boolean, default: true, }, compressSize: { //超过大小的图片压缩 type: Number, default: 512, }, data: { //上传附带的内容 type: Object, default() { return {}; }, }, action: { //上传地址 type: String, default: '', }, headers: { //设置上传的请求头部 type: Object, default() { return {}; }, }, imgWidth: { //图片压缩时指定压缩的图片宽度 type: [Number, Boolean], default: 800, }, quality: { //图片压缩的质量 type: Number, default: 1, }, beforeUpload: { //上传文件之前的钩子 type: Function }, onSuccess: { //上传成功的钩子 type: Function }, onError: { //上传失败的钩子 type: Function }, onLoadend: { //文件上传成功或者失败都会执行的钩子 type: Function }, onProgress: { //文件上传进度的钩子 type: Function }, onSuccessText: { //上传成功的提示内容 type: String, default: '上传成功' }, onErrorText: { //上传失败的提示内容 type: String, default: '上传失败' }, beforeRemove: { //删除文件的钩子 type: Function }, showRemove: { //是否展示删除icon type: Boolean, default: true }, type: { //单文件上传还是多文件上传 type: String, default: 'single', validator: function (value) { return ["single", "multiple"].includes(value); } }, maxNumber: { //多文件上传最多上传的个数 type: Number }, isImage: { //文件是否为图片 type: Boolean, default: true } } }

canvasDataURL(base) { const img = new Image(); img.src = base; const that = this; function ImgOnload() { /** * 计算生成图片的宽高 */ const scale = this.width / this.height; const width = that.imgWidth === false || this.width <= that.imgWidth ? this.width : that.imgWidth; const height = width / scale; const canvas = that.$refs.canvas; canvas.width = width; canvas.height = height; //利用canvas绘制压缩的图片并生成新的图片 const context = canvas.getContext("2d"); context.drawImage(this, 0, 0, width, height); canvas.toBlob( blob => { that.file = blob; that.upload(blob); that.$emit("on-change", blob, that.options); }, "image/png", that.quality ); /** * 使用完的createObjectURL需要释放内存 */ window.URL.revokeObjectURL(this.src); } img.onload = ImgOnload; }

export function fetch(options, file) { if (typeof XMLHttpRequest === 'undefined') { return; } const xhr = new XMLHttpRequest(); const action = options.action; if (xhr.upload) { xhr.upload.onprogress = function progress(e) { if (e.total > 0) { e.percent = e.loaded / e.total * 100; } options.uploadProgress(e); }; } const formData = new FormData(); formData.append(options.name, file, options.fileName); for (const key in options.data) { formData.append(key, options.data[key]); } // 成功回调 xhr.onload = (e) => { const response = e.target.response; if (xhr.status < 200 || xhr.status >= 300) { options.uploadError(response); return; } options.onload(response); }; // 出错回调 xhr.onerror = (e) => { const response = e.target.response; options.uploadError(response); }; // 请求结束 xhr.onloadend = (e) => { const response = e.target.response; options.uploadLoadend(response); }; xhr.open('post', action, true); const headers = options.headers; for (const key in headers) { if (headers[key] !== null) { xhr.setRequestHeader(key, headers[key]); } } xhr.send(formData); }

/** * 获取文件的后缀 * @param {*} file */ export const getType = file => file.s
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：vue elementui二次封装el-table带插槽问题_vue.js_
                                                                
下一篇：手把手带你安装vue-cli并创建第一个vue-cli应用程序_vue.js_