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

相关推荐
UrbanJazzerati几秒前
前端入门:margin居中、border、box-radius、transform、box-shadow、mouse事件、preventDefault()
前端·面试
蝎子莱莱爱打怪几秒前
🚀🚀🚀嗨,一起来开发 开源IM系统呀!
前端·后端·github
Enddme5 分钟前
《前端笔试必备:JavaScript ACM输入输出模板》
前端·javascript·面试
前端鱼5 分钟前
前端面试中值得关注的js题
前端·面试
UnnamedOrange12 分钟前
有来前后端部署
前端·后端
力Mer13 分钟前
全排列-遇到的深浅拷贝问题
javascript
德育处主任15 分钟前
p5.js 绘制 3D 椭球体 ellipsoid
前端·javascript·数据可视化
未来之窗软件服务17 分钟前
未来之窗昭和仙君 (四) 前端网页分页 — 东方仙盟筑基期
前端·仙盟创梦ide·东方仙盟·东方仙盟修仙·昭和仙君
安卓开发者28 分钟前
鸿蒙Next Web组件详解:属性设置与事件处理实战
前端·华为·harmonyos
安卓开发者28 分钟前
鸿蒙NEXT Web组件与JavaScript交互:打通原生与前端的桥梁
前端·javascript·harmonyos