uniapp实现商品图片管理

先上效果图（实现商品的图片管理）

（修改前）（修改后）

图片管理移动app常见需求，今天主要演示如何快速实现.这里还是基于《星云erp-移动版》演示版

（自行下载导入 Hbuilder, 后端接口可以直接使用我演示接口，不需要修改）

说明：后端接口已经实现，可以直接gitee上《星云erp-移动版》下载

第一步: 组件选择

我们直接使用uni-file-picker 组件，具体介绍见：uni-file-picker 文件选择上传 - DCloud 插件市场

第二步：接口方法定义

在这个目录下新增一个上传方法

/**
* 通用上传图片
* @data data
*/

export function uploadImage(data) {

   return request({
       url: baseUrl + '/upload/image',
       method: 'post',
       data: data,
       dataType: 'file',
       contentType: ContentTypeConst.BLOB,
   });
}

第三步：修改商品列表

<uni-list><uni-list-item v-for="item in searchFormDataList" :title="item.name+'        '+item.code":show-extra-icon="true" showArrow :thumb="item.imageUrl" thumb-size="lg":note="item.categoryName+'  '+item.brandName+'  '+item.createTime" clickable @click="showDetailAndEdit(item.id)" /></uni-list>

第四步：修改编辑和新增表单

<uni-forms-item label="图片" name="imageUrl">
                           <view>
                               <uni-file-picker limit="1" ref="files" :auto-upload="false" v-model='fileList'
                                   fileMediatype="image" mode="grid" />
                               <button @click="upload">上传图片</button>
                           </view>
                       </uni-forms-item>

第五步：调用上传方法

//上传图片
           upload()
           {
               var _self = this;
               if (this.$refs['files'].files.length > 0) {
                   var fileData = this.$refs['files'].files[0];
                   uploadImage(fileData).then((res) => {
                   if (res.code == 200) {
                       console.log("图片上传成功")
                   }
               });
               }

           }

另外还有一种上传方法，就是直接使用uni.uploadFile

写法如下

           //上传图片
           upload() {
               var _self = this;
               if (this.$refs['files'].files.length > 0) {
                   var fileData = this.$refs['files'].files[0];

                   const uploadTask = uni.uploadFile({
                       url: this.globalConfig.baseUrl + '/component/upload/image', // 开发者服务器接口地址
                       filePath: fileData.path, // 要上传文件资源的路径
                       name: 'file', // 文件对应的 key
                       header: {
                           'X-Auth-Token': getToken()
                       },
                       formData: {
                           'file': fileData
                       }, // 请求的 form data
                       success: function(uploadFileRes) {
                           var data = JSON.parse(uploadFileRes.data);

                           // 处理上传成功的结果
                           _self.$set(_self.addAndEditFormData, "imageUrl", data.data);

                       },
                       fail: (error) => {
                           console.error(error);
                           // 处理上传失败的错误
                       }
                   });
               }

           },