> app中圖片上傳是經常用到的功能 [TOC] ## 圖片上傳 > 使用 [文件上傳：uni.uploadFile()](https://uniapp.dcloud.io/api/request/network-file?id=uploadfile)方式 ~~~ <template> <view class="content"> <progress :percent="percent" strock-width="10"></progress> <button type="primary" @tap="upload">chooseImg</button> </view> </template> <script> // 注冊一個進度條 var _self; export default { data() { return { percent:0 } }, onLoad() { _self = this; }, methods: { upload:function(){ uni.chooseImage({ count: 1, sizeType:['copressed'], success(res) { // console.log(res.tempFilePaths) // 如果設置可選多張，這里可打印多張圖地址 //因為有一張圖片， 輸出下標[0]， 直接輸出地址 var imgFiles = res.tempFilePaths[0] console.log(imgFiles) // 上傳圖片 // 做成一個上傳對象 var uper = uni.uploadFile({ // 需要上傳的地址 url:'http://demo.hcoder.net/index.php?c=uperTest', // filePath 需要上傳的文件 filePath: imgFiles, name: 'file', success(res1) { // 顯示上傳信息 console.log(res1) } }); // onProgressUpdate 上傳對象更新的方法 uper.onProgressUpdate(function(res){ // 進度條等于 上傳到的進度 _self.percent = res.progress console.log('上傳進度' + res.progress) console.log('已經上傳的數據長度' + res.totalBytesSent) console.log('預期需要上傳的數據總長度' + res.totalBytesExpectedToSend) }) } }) } } } </script> ~~~ ## 頭像上傳 > 比如用戶資料修改，其展現方式與以上不同 > 可參考：https://www.cnblogs.com/wo1ow1ow1/p/11730220.html ## 圖片緩存 > 使用 [文件下載：uni.downloadFile()](https://uniapp.dcloud.io/api/request/network-file?id=downloadfile)方式 ~~~ <template> <view class="content"> <image :src="imgUrl4display"></image> </view> </template> <script> var _self; export default { data() { return { imgUrl4display: '', imgRemoteUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg' } }, onLoad() { _self = this; let keyName = 'image_storage'; uni.getStorage({ key: keyName, success: function(res) { console.log('get storage success...'); _self.displayImg(res.data); }, fail: function(res) { console.log('fail 2 download...'); // 本地沒有緩存 需要下載 uni.downloadFile({ url: _self.imgRemoteUrl, success: (res) => { console.log(res) if (res.statusCode === 200) { _self.displayImg(res.tempFilePath); uni.setStorage({ key: keyName, data: res.tempFilePath, success: function() { } }) } } }); } }) }, methods: { displayImg: function(data) { _self.imgUrl4display = data; } } } </script> ~~~