若依移动端|ruoyi-app 怎么上传图片|unapp 上传图片

1.先上效果图

1.1未上传图片效果图

1.2上传之后的效果图

1.3预览效果图

2.实现方式

<uni-forms-item label="营业执照" name="landUseArea" required> 
    <uni-row class="demo-uni-row"  >
        <uni-col :span="24">
             
             <uni-icons custom-prefix="alibaba-icon" type="icon-shangchuantupian" size="30"  @click='insertShopPermit("charterPhoto")'  v-show="form.charterPhoto == ''"></uni-icons> 
             <image :src="form.charterPhoto" mode="aspectFit" v-show="form.charterPhoto != ''" style="width:100%;"  @click="previewByPath(form.charterPhoto)"></image>
        </uni-col> 
    </uni-row> 
</uni-forms-item>

<uni-forms-item label="门头照片" name="landUseArea" required @click='insertHeadPoto'>
    <uni-row class="demo-uni-row"  >
        <uni-col :span="24">
             <uni-icons custom-prefix="alibaba-icon" type="icon-shangchuantupian" size="30" @click='insertShopPermit("shopPhoto")'   v-show="form.shopPhoto == ''"></uni-icons> 
              <image :src="form.shopPhoto" mode="aspectFit"  style="width:100%;"   @click="previewByPath(form.shopPhoto)"  v-show="form.shopPhoto != ''"></image>
        </uni-col> 
    </uni-row> 
</uni-forms-item>

   //图片上传函数
async insertShopPermit(formKey){ 
        uni.showLoading({
                    mask: true,
                    title: '上传中...'
                })
                // uploadFile 存储需要上传的文件
                let uploadFile = ''
                // 1.选择图片（这里只能单选）
                const res = await uni.chooseImage({
                    count: 1,	// 最多可以选择的图片张数，默认9
                    // sizeType: ['compressed'],		// original 原图，compressed 压缩图，默认二者都有
                    //sourceType: ['album'],		// album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
                });
                // console.log('res:', res);
                if(res.length < 2) {		// 小于2则没有选择图片
                    uni.hideLoading()
                    return
                }
                console.log("上传的文件",res);
                uploadFile = res[1].tempFilePaths[0];	// 拿到选择的文件
            
                var that1 = this;
                // 2.将选择的图片上传到目标服务器
                   let data = { filePath: uploadFile}
                   uploadImg(data).then(response => { 
                     if(response.code != 200) {	// 图片上传失败了
                     	uni.hideLoading()
                     	that1.$u.toast(response.msg)
                     	return
                     }else{
                         console.log(that1.form[formKey]);
                            that1.form[formKey] = response.url;
                         	uni.hideLoading()
                     }
                  }) 
            
     
},
   //预览的方法
   getHourseByid(id){
    getHourse(id).then(response => {
        this.form = response.data;
        this.location = response.data.location;
        this.oper = 'update';
      });
},

3.调用的api

// 上传照片
export function uploadImg(data) {
  return upload({
    url: '/common/upload',
    name: data.name,
    filePath: data.filePath
  })
}

4.服务端代码（若依自带的）

/**
 * 通用上传请求（单个）
 */
@PostMapping("/upload")
public AjaxResult uploadFile(MultipartFile file) throws Exception
{
    try
    {
        // 上传文件路径
        String filePath = RuoYiConfig.getUploadPath();
        // 上传并返回新文件名称
        String fileName = FileUploadUtils.upload(filePath, file);
        String url = serverConfig.getUrl() + fileName;
        AjaxResult ajax = AjaxResult.success();
        ajax.put("url", url);
        ajax.put("fileName", fileName);
        ajax.put("newFileName", FileUtils.getName(fileName));
        ajax.put("originalFilename", file.getOriginalFilename());
        return ajax;
    }
    catch (Exception e)
    {
        return AjaxResult.error(e.getMessage());
    }
}

5.加班严重，周六日也不给休息，已经拖欠了3个月工资了，哎…. 祝好吧

6.uniapp 官网图片操作连接：https://uniapp.dcloud.net.cn/api/media/image.html#chooseimage

7.那个小图标是阿里巴巴矢量图标传送门：https://www.iconfont.cn/

8.uniapp 图标的使用方法：https://uniapp.dcloud.net.cn/component/uniui/uni-icons.html#%E4%BB%8B%E7%BB%8D 看官网不会用的话就dd我，我出个教程。