vue2上傳文件
① 如何在Vue 2中處理文件上傳
按需組件引入吧，這樣會減少不必要的css，當然你每個組件的css要獨立出來，而且如果使用webpack 的vue-loader處理 即使重復引用同一個組件css也是同用一份，不會額外的復制多個
② vue使用input標簽 type='file'上傳文件
1、html中
2、js
3、注意
該api介面需要單獨配置請求頭headers
4、成功後會返回圖片的地址，就ok了
如果你做的是上傳頭像的功能，並且要對圖片進行裁剪，推薦個 不錯的插件
③ vue2.x，element-ui 中上傳圖片組件（圖片查看，已有圖片渲染）
1、基本標簽結構
<el-upload name="picture"
:action="'/api/image/upload?imageType=xxx"
accept=".jpg, .png"
list-type="picture-card"
:limit="1"
:file-list="filelists"
:on-exceed="onExceed"
:before-upload="beforeUpload"
:on-preview="handlePictureCardPreview"
:on-success="imagesuccess"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
<!--預覽-->
<el-dialog :visible.sync="imgPreviewVisible" size="full" :modal="false" title="預覽">
<img width="100%" :src="imagePreviewUrl" alt="">
</el-dialog>
方法示例：
onExceed(files, fileList) {
this.$message({
type: 'info',
message: '最多隻能上傳一個圖片',
ration: 6000
});
},
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg'
const isGIF = file.type === 'image/gif'
const isPNG = file.type === 'image/png'
const isBMP = file.type === 'image/bmp'
const imgSizeLimit= file.size < 1*1024*1024;
if (!isJPG && !isGIF && !isPNG && !isBMP) {
this.$message.error('上傳圖片必須是JPG/GIF/PNG/BMP 格式!');
}
if (!imgSizeLimit) {
this.$message.error('上傳圖片大小不能超過 1MB!');
}
return (isJPG || isBMP || isGIF || isPNG) && imgSizeLimit; },
handlePictureCardPreview:function(file){
//todo
},
imagesuccess:function(response, file, fileList){
//todo
this.filelists = [];
this.filelists = [file]
},
handleRemove:function(file, fileList){
//todo
},
2、action為後台上傳圖片介面
file-list為文件列表
limit為設置的可上傳文件的最大個數
onExceed上傳的文件個數超出設定時觸發的函數，參數為上傳的文件file和文件列表 filelists
beforeUpload文件上傳前執行，參數為上傳的文件file，如果返回false或者返回Primary且被reject，則停止上傳
handlePictureCardPreview圖片預覽時觸發，參數為上傳的文件file，
imagesuccess圖片上傳成功時觸發參數response, file, filelists
handleRemove移除圖片時觸發，參數為file, filelists
3、已有圖片渲染問題：
自己在實際開發過程中，會遇到編輯情況，並且已經存在一張圖片，想要放到圖片組件中，可以調用組件里聲明的方法。
由於是新手，組件使用不熟練，所以我將圖片的顯示與上傳等操作分離，單獨自己去展示，上傳時再使用組件上傳，使用組件的:show-file-list="false"屬性來隱藏組件自帶的圖片展示功能。
後來發現自己可以自己初始化filelists列表，來使已存在的圖片文件放入組件中，放入的對象當然時文件，但是我後台只有圖片地址，如何拼出一個file格式對象來呢？通過debug，我發現上傳的文件格式對象有好多屬性，當然，存在url這個屬性就可以通過組件進行展示。最簡單的一種方式就是直接創建一個只有一個url屬性的對象var file = { url:this.showDetailForm.profilePhotoPath } this.filelists.push(file) 然後push到文件列表，就可以在組件中進行渲染，對圖片的操作可以使用聲明的方法+表單屬性來實現業務的全過程（當然，這樣渲染的文件只有url，沒有其他屬性，比如文件大小，涉及到其他屬性的函數都沒辦法調用）
④ vue el-upload上傳文件方法 詳細解答 action 和 http-request兩種方式
包括action 和 http-request兩種方式
上傳成功回調方法 綁定 handleSuccess 方法
自定義上傳相比action上傳，擴展性更強，當項目里上傳需求較多，且連接不同介面地址時，配置uploadheaders 配置很多顯然不太優雅。
注意：自定義上傳時，需要對該上傳設置一下請求頭 。 在攔截器里設置請求頭
自定義上傳的觸發方式 ，點擊確定時在 importUser 里執行，執行這句即是執行uploadFile方法
注意： formdata列印不出來，實際有值
⑤ Vue 上傳圖片到七牛雲實用攻略
vue 一般採用element 的upload 上傳圖片/文件。
首先，設定參數
參考Element upload 文檔
其次，如圖所示，重點在於domain和qiniuaddr兩個參數！ 參考 七牛雲存儲圖片域名文檔
然後 上傳一定要先獲取到七牛雲token！我是採用axios post獲取。
接著，把返回的 file.name賦值給 key
this.QiNiuYun.key = `name_${file.name}`;
如圖 上傳成功/錯誤處理 函數
大功告成！
補充：
1. this.uploadImageUrl 這個變數實際上是 圖片真正的URL-----https地址！！！
2. 該方法是針對單圖上傳，如果想多圖 將data 內的參數 limit：1 修改為需要的圖片數量 ！！！
3. 注意！當後台需要你傳遞多張圖片的url時，可採用 此方法！！！
//拼接 url
if(this.uploadImageList===''){
this.uploadImageList= this.uploadImageUrl;
}else{
this.uploadImageList=this.uploadImageList+';'+ this.uploadImageUrl;
}