這篇文章主要介紹了Vue封裝一個簡單輕量的上傳檔案元件的範例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧
一、之前遇到的一些問題
專案中多出有上傳檔案的需求,在使用現有的UI框架實現的過程中,不知道什麼原因,總是會有一些莫名其妙的bug。例如用某上傳元件,明明註明(:multiple="false"),可實際上還是能多選,上傳的時候依然發送了多個文件;又例如只要加上了(:file-list="fileList ")屬性,希望能手動控制上傳清單的時候,上傳事件this.refs.[upload(元件ref)].submit()就不起作用了,傳不了。總之,我懶得再看它怎麼實現了,我用的是功能,介面本身還是要重寫的,如果堅持用也會使項目多很多不必要的邏輯、樣式代碼……
之前用Vue做專案用的視野架構有element-ui,團隊內部作為補充的zp-ui,以及iview。框架是好用,但是針對自己的專案往往不能全部拿來用,尤其是我們的設計妹子出的介面與現有框架差異很大,改源碼效率低又容易導致未知的bug,於是自己就抽時間封裝了這個上傳元件。
二、程式碼與介紹
父元件
##
<template> <p class="content"> <label for="my-upload"> <span>上传</span> </label> <my-upload ref="myUpload" :file-list="fileList" action="/uploadPicture" :data="param" :on-change="onChange" :on-progress="uploadProgress" :on-success="uploadSuccess" :on-failed="uploadFailed" multiple :limit="5" :on-finished="onFinished"> </my-upload> <button @click="upload" class="btn btn-xs btn-primary">Upload</button> </p> </template> <script> import myUpload from './components/my-upload' export default { name: 'test', data(){ return { fileList: [],//上传文件列表,无论单选还是支持多选,文件都以列表格式保存 param: {param1: '', param2: '' },//携带参数列表 } }, methods: { onChange(fileList){//监听文件变化,增减文件时都会被子组件调用 this.fileList = [...fileList]; }, uploadSuccess(index, response){//某个文件上传成功都会执行该方法,index代表列表中第index个文件 console.log(index, response); }, upload(){//触发子组件的上传方法 this.$refs.myUpload.submit(); }, removeFile(index){//移除某文件 this.$refs.myUpload.remove(index); }, uploadProgress(index, progress){//上传进度,上传时会不断被触发,需要进度指示时会很有用 const{ percent } = progress; console.log(index, percent); }, uploadFailed(index, err){//某文件上传失败会执行,index代表列表中第index个文件 console.log(index, err); }, onFinished(result){//所有文件上传完毕后(无论成败)执行,result: { success: 成功数目, failed: 失败数目 } console.log(result); } }, components: { myUpload } } </script>#父元件處理與業務有關的邏輯,我特意加入索引參數,以便於介面展示上傳結果的時候能夠直接操作第幾個值,並不是所有方法都必須的,視需求使用。 子元件
<template> <p> <input style="display:none" @change="addFile" :multiple="multiple" type="file" :name="name" id="my-upload"/> </p> </template>上傳文件,html部分就這麼一對兒標籤,不喜歡複雜囉嗦
#
<script> export default { name: 'my-upload', props: { name: String, action: { type: String, required: true }, fileList: { type: Array, default: [] }, data: Object, multiple: Boolean, limit: Number, onChange: Function, onBefore: Function, onProgress: Function, onSuccess: Function, onFailed: Function, onFinished: Function }, methods: {}//下文主要是methods的介绍,此处先省略 } </script>這裡定義了父元件向子元件需要傳遞的屬性值,注意,這裡把方法也當做了屬性傳遞,都是可以的。 自己寫的元件,沒有像流行框架發布的那樣完備和全面,另外針對開頭提到的綁定file-list就不能上傳了的問題(更可能是我的姿勢不對),本人也想盡力解決掉自身遇到的這個問題,所以希望能對文件清單有絕對的控制權,除了action,把file-list也當作父元件必須要傳遞的屬性。 (屬性名稱父元件使用「-」連接,對應子元件prop中的駝峰命名)
#三、主要的上傳功能
##methods: { addFile, remove, submit, checkIfCanUpload }
methods內共4個方法,新增檔案、移除檔案、提交、偵測(上傳之前的檢驗),以下一一講述:
##1.新增檔案addFile({target: {files}}){//input标签触发onchange事件时,将文件加入待上传列表 for(let i = 0, l = files.length; i < l; i++){ files[i].url = URL.createObjectURL(files[i]);//创建blob地址,不然图片怎么展示? files[i].status = 'ready';//开始想给文件一个字段表示上传进行的步骤的,后面好像也没去用...... } let fileList = [...this.fileList]; if(this.multiple){//多选时,文件全部压如列表末尾 fileList = [...fileList, ...files]; let l = fileList.length; let limit = this.limit; if(limit && typeof limit === "number" && Math.ceil(limit) > 0 && l > limit){//有数目限制时,取后面limit个文件 limit = Math.ceil(limit); // limit = limit > 10 ? 10 : limit; fileList = fileList.slice(l - limit); } }else{//单选时,只取最后一个文件。注意这里没写成fileList = files;是因为files本身就有多个元素(比如选择文件时一下子框了一堆)时,也只要一个 fileList = [files[0]]; } this.onChange(fileList);//调用父组件方法,将列表缓存到上一级data中的fileList属性 },2.移除檔案這個簡單,有時候在父元件叉掉某檔的時候,傳一個index即可。
remove(index){ let fileList = [...this.fileList]; if(fileList.length){ fileList.splice(index, 1); this.onChange(fileList); } },3.提交上傳這裡使用了兩種方式,fetch和原生方式,由於fetch不支援取得上傳的進度,如果不需要進度條或自己模擬進度或XMLHttpRequest物件不存在的時候,使用fetch請求上傳邏輯會更簡單一些
submit(){ if(this.checkIfCanUpload()){ if(this.onProgress && typeof XMLHttpRequest !== 'undefined') this.xhrSubmit(); else this.fetchSubmit(); } },4.基於上傳的兩套邏輯,這裡封裝了兩個方法xhrSubmit和fetchSubmitfetchSubmit
fetchSubmit(){ let keys = Object.keys(this.data), values = Object.values(this.data), action = this.action; const promises = this.fileList.map(each => { each.status = "uploading"; let data = new FormData(); data.append(this.name || 'file', each); keys.forEach((one, index) => data.append(one, values[index])); return fetch(action, { method: 'POST', headers: { "Content-Type" : "application/x-www-form-urlencoded" }, body: data }).then(res => res.text()).then(res => JSON.parse(res));//这里res.text()是根据返回值类型使用的,应该视情况而定 }); Promise.all(promises).then(resArray => {//多线程同时开始,如果并发数有限制,可以使用同步的方式一个一个传,这里不再赘述。 let success = 0, failed = 0; resArray.forEach((res, index) => { if(res.code == 1){ success++; //统计上传成功的个数,由索引可以知道哪些成功了 this.onSuccess(index, res); }else if(res.code == 520){ //约定失败的返回值是520 failed++; //统计上传失败的个数,由索引可以知道哪些失败了 this.onFailed(index, res); } }); return { success, failed }; //上传结束,将结果传递到下文 }).then(this.onFinished); //把上传总结果返回 },
##xhrSubmit
#xhrSubmit(){ const _this = this; let options = this.fileList.map((rawFile, index) => ({ file: rawFile, data: _this.data, filename: _this.name || "file", action: _this.action, onProgress(e){ _this.onProgress(index, e);//闭包,将index存住 }, onSuccess(res){ _this.onSuccess(index, res); }, onError(err){ _this.onFailed(index, err); } })); let l = this.fileList.length; let send = async options => { for(let i = 0; i < l; i++){ await _this.sendRequest(options[i]);//这里用了个异步方法,按次序执行this.sendRequest方法,参数为文件列表包装的每个对象,this.sendRequest下面紧接着介绍 } }; send(options); },
這裡借鏡了element-ui的上傳原始碼
sendRequest(option){ const _this = this; upload(option); function getError(action, option, xhr) { var msg = void 0; if (xhr.response) { msg = xhr.status + ' ' + (xhr.response.error || xhr.response); } else if (xhr.responseText) { msg = xhr.status + ' ' + xhr.responseText; } else { msg = 'fail to post ' + action + ' ' + xhr.status; } var err = new Error(msg); err.status = xhr.status; err.method = 'post'; err.url = action; return err; } function getBody(xhr) { var text = xhr.responseText || xhr.response; if (!text) { return text; } try { return JSON.parse(text); } catch (e) { return text; } } function upload(option) { if (typeof XMLHttpRequest === 'undefined') { return; } var xhr = new XMLHttpRequest(); var action = option.action; if (xhr.upload) { xhr.upload.onprogress = function progress(e) { if (e.total > 0) { e.percent = e.loaded / e.total * 100; } option.onProgress(e); }; } var formData = new FormData(); if (option.data) { Object.keys(option.data).map(function (key) { formData.append(key, option.data[key]); }); } formData.append(option.filename, option.file); xhr.onerror = function error(e) { option.onError(e); }; xhr.onload = function onload() { if (xhr.status < 200 || xhr.status >= 300) { return option.onError(getError(action, option, xhr)); } option.onSuccess(getBody(xhr)); }; xhr.open('post', action, true); if (option.withCredentials && 'withCredentials' in xhr) { xhr.withCredentials = true; } var headers = option.headers || {}; for (var item in headers) { if (headers.hasOwnProperty(item) && headers[item] !== null) { xhr.setRequestHeader(item, headers[item]); } } xhr.send(formData); return xhr; } }
最後把請求前的校驗加上
checkIfCanUpload(){ return this.fileList.length ? (this.onBefore && this.onBefore() || !this.onBefore) : false; },
如果父元件定義了onBefore方法且回傳了false,或是檔案清單為空,請求就不會傳送。
程式碼部分完了,使用時只要有了on-progress屬性並且XMLHttpRequest物件可訪問,就會使用原生方式發送請求,否則就用fetch發送請求(不展示進度)。
上面是我整理給大家的,希望今後對大家有幫助。
相關文章:
Ajax表單異步上傳檔案實例代碼以上是Vue封裝一個簡單輕量的上傳檔案元件的範例的詳細內容。更多資訊請關注PHP中文網其他相關文章!