uniapp 之使用 u-upload 组件来实现图片上传

• 前言
• 一、官方示例用法
• • 分析
• 二、关闭自动上传,使用手动上传的方式,代码
• • html 代码
  • js 代码
  • css 代码
• 总结分析

前言

在使用 uniapp 开发的微信小程序中使用了图片上传功能,使用了 uniapp 的图片上传组件
注意：我这里后端接口接收类型为form-data，参数名为files

一、官方示例用法

uview 1.0 u-upload 官方文档

分析

首先可以看到 这里的 :auto-upload="true" ,这里是设置文件选中后自动上传,且上传路径为 data 当中定义的 action ,但是这里使用自动上传的时候,只能设置上传的 url 地址,如果业务当中有其他需求,比如请求头中需要携带 token … 将无法满足
因此可以选择将自动上传关掉 :auto-upload="false"
绑定选择完成后的回调函数,并在回调函数当中使用手动上传 @on-choose-complete="onChooseComplete"

二、关闭自动上传,使用手动上传的方式,代码

html 代码

js 代码

css 代码

当前实现的效果

总结分析

当前项目中提供的上传图片需要携带 token
所以采用了 uni.uploadFile 来上传文件,这里要求参数 url 在app 端写全(携带 http / https )
uni.uploadFile 是无法被统一的请求拦截器拦截到的,如果需要携带请求头,需要自己在 uni.uploadFile 中进行配置,

例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。