uview--上传图片

第一步:

项目中引入uview 库 (详见)

项目 引入 uView_vue引入uview_qq_2524963996的博客-CSDN博客

第二步:

在 uview 官网 uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架

在合适的位置上 放上 上传图片的一段代码

代码如下:

javascript 复制代码
 <u-upload class="main-pics main-allstw-alls1" :fileList="fileList5" 
      @afterRead="afterRead5" @delete="deletePic5" name="4" multiple :maxCount="1">
      <image src="../../../static/workwx/image/tuShang.png" style="width: 150rpx; height:             
      150rpx"></image>
 </u-upload>

                fileList5: []

                //添加
                afterRead5(file, lists, name) {
        			this.uploadFileToServer(file);
	        },
                //删除
                deletePic5(file, index) {
			this.fileList5.splice(index, 1);
		    },

	            // 上传图片

		       uploadFileToServer(file, num) {
                      console.log('fli', file);
                      let that = this;
                      uni.uploadFile({
                        // 上传服务器
                      url: 'https://yapi.care-bay.com/zg/common/upload', // 上传服务器的接口地址
                      filePath: file.file[0].url, // 要上传的文件路径
                      name: 'file', // 文件对应的 key 值,服务器端用于获取文件的字段名
                      formData: {
                      fileType: 3 // 上传文件的类型,此处为示例值,您可以根据实际需要设置
                      // file: file.file.url // 上传文件的字段名,此处为示例值,您可以根据实际需要设置
    },
                      success: (res) => {
                      that.fileList5 = [];
                      // 上传成功的回调处理,你可以根据服务器返回的数据来处理上传结果
                      let data = JSON.parse(res.data);
                      // 存入对象 必须是 url
                      let url = {
                        url: data.url
                  };
                      //显示
                  that.fileList5.push(url);
            },
                    fail: (err) => {
                  // 上传失败的回调处理
                  console.error('上传失败', err);
    }
  });
}

一一解释

fileList5:图片显示集合

deletePic5: 删除图片

afterRead5 :上传之后参数函数

max-count :最大选择图片的数量

name: 上传文件的字段名,供后端获取使用

multiple: 是否开启图片多选,部分安卓机型不支持

可以自定义图片:----------

Upload 上传 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架

注意一下是 2.X

相关推荐
hj5914_前端新手1 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法1 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku1 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode1 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu1 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu1 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu1 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu1 小时前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu1 小时前
【js篇】addEventListener()方法的参数和使用
前端·javascript
该用户已不存在1 小时前
6个值得收藏的.NET ORM 框架
前端·后端·.net