最新公告
  • 欢迎您光临码巴巴,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 若依移动端|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我,我出个教程。

    1. 本站所有资源来源于用户上传和网络,如有侵权请及时联系站长!

    2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!

    3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

    4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!

    5. 如有链接无法下载、失效或广告,请联系管理员处理!

    6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

    7. 如遇到加密压缩包,默认解压密码为"mababa.xin",如遇到无法解压的请联系管理员!


    码巴巴-优质代码创造者 » 若依移动端|ruoyi-app 怎么上传图片|unapp 上传图片

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    一个高级程序员模板开发平台
    问问管理员?

    2 评论

    1. 怎么联系你,需要支援

    发表评论

    • 44会员总数(位)
    • 92资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 1485稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情
    升级SVIP尊享更多特权立即升级