uniapp上傳圖片

文章目錄

• • • uniapp上傳圖片
    • 選擇圖片
    • 上傳圖片
    • 使用
    • 相關數據效果圖

選擇圖片

這里定義js文件

export default {/*** 選擇圖片* @param number num* @param {Object} params* @param {Object} callback* @param string url* return array*/upload: function(num, params, callback, url) {// 根據個人需求傳參數 ....// #ifdef MP-WEIXINvar app_type = 'weapp';var app_type_name = '微信小程序';// #endif// 參數var data = {app_type: app_type,app_type_name: app_type_name}data = Object.assign(data, params);var _self = this;uni.chooseImage({count: num,sizeType: ['compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有sourceType: ['album', 'camera'], // 從相冊或者拍照success: async function(res) {console.log('選擇圖片成功回調：', res)const tempFilePaths = res.tempFilePaths;var _data = data;var imgs = [];for (var i = 0; i < tempFilePaths.length; i++) {// 執行上傳圖片方法，返回已上傳的相關圖片路徑var path = await _self.upload_file_server(tempFilePaths[i], _data, url);imgs.push(path);}typeof callback == 'function' && callback(imgs);}});}, }

上傳圖片

/*** 圖片上傳*/ upload_file_server(tempFilePath, data, url = "") {// 處理URLvar uploadUrl = '';if (url) {uploadUrl = `${Config.baseUrl}${url}`} else {uploadUrl = `${Config.baseUrl}/api/upload/${data.path}`;}return new Promise((resolve, reject) => {uni.uploadFile({url: uploadUrl,filePath: tempFilePath,name: 'file',formData: data,success: function(res) {var tmpData = JSON.parse(res.data);console.log('上傳文件返回數據：', tmpData)// 根據個人需求返回相關數據if (tmpData.code >= 0) {resolve(tmpData.data.pic_path);} else {reject("error");}}});}); },

使用

<view class="idenItem" @click="addImgTap()"><image class="whFull" :src="card_front" mode="aspectFill"></image> </view>
addImgTap(type) {this.$util.upload(1, {path: 'authimg'}, res => {console.log('已上傳的圖片資源', res);}); }

相關數據效果圖

總結

以上是生活随笔為你收集整理的uniapp上传图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。