uview--上传图片

最新推荐文章于 2024-07-09 10:24:41 发布

qq_2524963996

最新推荐文章于 2024-07-09 10:24:41 发布

阅读量1.8k

点赞数

文章标签： vue.js javascript 前端前端框架

本文链接：https://blog.csdn.net/qq_44161703/article/details/131818924

版权

第一步：

项目中引入uview 库（详见）

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

第二步：

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

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

代码如下：

 <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