uniapp + uview —— 上传图片

index.vue

javascript 复制代码
<u-upload
   ref="upload"
   max-count="6"
   :header="header"
   :action="action"
   :custom-btn="true"
   :show-tips="false"
   :show-progress="false"
   @on-success="successUpload"
   @on-remove="removeFile"
 ></u-upload>

接口、请求头部

javascript 复制代码
data() {
	fileList: [],
	header: {
      'Content-Type': 'multipart/form-data', //设置multipart/form-data格式
       Authorization: 'Bearer ' + uni.getStorageSync('access_token')
     },
}
computed: {
    action() {
      return url.baseURL + '/upload' // ule.baseURL 从配置地址处引入,获取当前环境url
    }
  },

方法

javascript 复制代码
// 上传
successUpload(data, index, lists, name) {
   this.fileList.push(data.data)
 },
 // 移除
 removeFile(index, lists, name) {
   this.fileList.splice(index, 1)
 }
相关推荐
不爱说话郭德纲4 小时前
告别漫长的HbuilderX云打包排队!uni-app x 安卓本地打包保姆级教程(附白屏、包体积过大排坑指南)
android·前端·uni-app
大米饭消灭者1 天前
Taro是怎么实现一码多端的【底层原理】
微信小程序·taro
HashTang1 天前
【AI 编程实战】第 12 篇:从 0 到 1 的回顾 - 项目总结与 AI 协作心得
前端·uni-app·ai编程
JunjunZ1 天前
uniapp 文件预览:从文件流到多格式预览的完整实现
前端·uni-app
郑州光合科技余经理2 天前
代码展示:PHP搭建海外版外卖系统源码解析
java·开发语言·前端·后端·系统架构·uni-app·php
TT_Close2 天前
“啪啪啪”三下键盘,极速拉起你的 uni-app 项目!
vue.js·uni-app·前端工程化
FliPPeDround2 天前
Vitest Environment UniApp:让 uni-app E2E 测试变得前所未有的简单
微信小程序·e2e·前端工程化
FliPPeDround2 天前
微信小程序自动化的 AI 新时代:wechat-devtools-mcp 智能方案
微信小程序·ai编程·mcp
特立独行的猫a2 天前
uni-app x跨平台开发实战:开发鸿蒙HarmonyOS影视票房榜组件完整实现过程
华为·uni-app·harmonyos·轮播图·uniapp-x
码云数智-大飞2 天前
如何创建自己的小程序,码云数智与有赞平台对比
微信小程序