1、優(yōu)點(diǎn)
- 移動(dòng)端 和 pc 端通用
- 可以自己添加上傳進(jìn)度條
- 解釋了一些七牛的知識(shí)點(diǎn)
缺點(diǎn)：一次不能上傳多張圖片，不能預(yù)覽，不能裁剪圖片。
2、代碼
<!--html-->
<input @change="uploadInputchange" id="uploadFileInput" type="file" accept="image/*">
//js
import axios from 'axios';
methods: {
//觸發(fā)input change事件
uploadInputchange(){
let file = document.getElementById("uploadFileInput").files[0]; //選擇的圖片文件
this.uploadImgToQiniu(file);
},
//上傳圖片到七牛
uploadImgToQiniu(file){
const axiosInstance = axios.create({withCredentials: false}); //withCredentials 禁止攜帶cookie，帶cookie在七牛上有可能出現(xiàn)跨域問題
let data = new FormData();
data.append('token', this.params.token); //七牛需要的token，叫后臺(tái)給，是七牛賬號(hào)密碼等組成的hash
data.append('file', file);
axiosInstance({
method: 'POST',
url: 'http://upload.qiniup.com/', //上傳地址
data: data,
timeout:30000, //超時(shí)時(shí)間，因?yàn)閳D片上傳有可能需要很久
onUploadProgress: (progressEvent)=> {
//imgLoadPercent 是上傳進(jìn)度，可以用來添加進(jìn)度條
let imgLoadPercent = Math.round(progressEvent.loaded * 100 / progressEvent.total);
},
}).then(data =>{
document.getElementById("uploadFileInput").value = '' //上傳成功，把input的value設(shè)置為空，不然 無法兩次選擇同一張圖片
//上傳成功... (登錄七牛賬號(hào)，找到七牛給你的 URL地址) 和 data里面的key 拼接成圖片下載地址
}).catch(function(err) {
//上傳失敗
});
}
},
3、遇到的問題
3.1、微信等X5內(nèi)核瀏覽器不能選擇圖片（點(diǎn)擊圖片選擇沒有效果），
需要改變input accept 的值，很奇怪
<!--錯(cuò)誤-->
<input @change="uploadInputchange" id="uploadFileInput" type="file" accept="image/jpeg, image/png, image/gif">
<!--正確-->
<input @change="uploadInputchange" id="uploadFileInput" type="file" accept="image/*">
3.2、input不能連續(xù)兩次 選擇同一張圖片
因?yàn)槲覀兪怯胕nput的change事件 觸發(fā) 成功選擇圖片，change事件觸發(fā)是需要 input 的value值 改變，但是連續(xù)兩次選擇同一張圖片，value值并沒有改變，所以就不會(huì)觸發(fā)input的 change事件。
所以上傳圖片成功，就把需要value值清空
