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介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 一个高级程序员模板开发平台