uniapp - 上传图片-并且在点击上传时再上传接口 - 封装接口

request.js

const request = {}

request.globalRequest = (url, method, data, headers) => {
  if (headers == undefined || headers == null || !headers) {
    headers = {};
  }
  // 缓存中存在token取出来放入headers中
  var token = uni.getStorageSync('token');
  if (token) {
    headers['Authorization'] = 'bearer ' + token;
  }
  // 设置默认的content-type
  if(!headers['content-type']) {
    headers['content-type'] = 'application/json;charset=UTF-8';
  }
  // 发送headers不带Authorization参数的请求
  if (data && data.removeAuth) {
    delete headers["Authorization"];
    delete data.removeAuth;
  }
  if (method == undefined || method == null || !method) {
    method = 'post';
  }

  // 权限判断 因为有的接口请求头可能需要添加的参数不一样，所以这里做了区分
  // 1 == 不通过access_token校验的接口
  // 2 == 文件下载接口列表
  // 3 == 验证码登录

	method = method.toUpperCase();
  /*
	switch (power) {
		// 注册
		case 0:
      defaultHeaders['content-type'] = "application/x-www-form-urlencoded"
			break;
		// 获取验证码
		case 1:
      defaultHeaders['content-type']= "application/json;charset=UTF-8"
			break;
		// 登录配置
		case 2:
      defaultHeaders['content-type']= "application/x-www-form-urlencoded"
      defaultHeaders['Authorization'] = 'Basic '+ new Buffer('jswe-papj-mng:jswe-secret').toString('base64');
			break;
		default:
      defaultHeaders['content-type'] = "application/json;charset=UTF-8"
      defaultHeaders['Authorization'] = 'bearer ' + uni.getStorageSync('token')
			break;
	}*/

	return new Promise((resolve, reject) => {
		wx.request({
			url: url,
			method: method,
			header: headers,
			data: data,
			dataType: 'json',
			success (res) {
				resolve(res);
			},
			fail(err) {
				reject(err);
			}
		});

	});
}

/*
 * 单文件上传
 */
request.uploadRequest = (url, data,name) => {
	var hd = {
		Authorization: 'bearer ' + uni.getStorageSync('token')
	}
	return new Promise((resolve, reject) => {
		wx.uploadFile({
			url:url,
			filePath:data,
			name:name,
			header:hd,
			success:res=>{
				resolve(JSON.parse(res.data))
			},
			fail(err) {
				reject(err);
			}
		});

	});
}
export default request

index.js接口文件

const API_URL = `这里写域名`;

module.exports = {
	mattersLogin: `${API_URL}/login`,// 模拟定义一个登录接口
}

在项目的main.js文件中把上面的两个文件导出的对象挂在到全局，如下：

import api from '@/api/index.js'
import request from '@/common/request.js'

Vue.prototype.$api=api
Vue.prototype.$request=request

在页面中使用，如下

<uni-file-picker v-model="beforeImageVal" fileMediatype="image" mode="grid" @select="btnSelectImg"></uni-file-picker>
<button type="primary" @click="btn_goSubmit">上传</button>

export default {
	data() {
		return {
			beforeImageVal: [],
			beforeImgArr: [],
		}
	},
	methods: {
		btnSelectImg(e){
			this.beforeImageVal=[...this.beforeImageVal,e.tempFiles[0]];
		},
		btn_goSubmit() {
			let beforeImgArr=[]
			// 判断，如果选择的有图片了才上传
			if(this.beforeImageVal.length>0){
				// 对选择的图片做循环，且调上传图片接口
				this.beforeImageVal.forEach((f,index)=>{
					this.$request.uploadRequest(this.$api.ossFileUpload,f.path,'file').then(resolve=>{
						console.log('upload success', resolve );
						beforeImgArr=[...beforeImgArr,resolve.data[0].id];
						// 这里的this.beforeImgArr 所存的数据就是要传给后台的file文件流
						this.beforeImgArr = beforeImgArr
							// 如果有多个地方上传图片，在这里继续再写一边即可
							......
							// 所有图片都上传后，在这里调页面的add提交接口
							// (举个例子 - 调提交接口)
							// this.submit()
					}).catch(err => {
						console.log('update fail', err);
					});
				})
			}
		}，
		// 提交接口
		submit(){
			
		}
	}
}