收藏
便签
笔记
消息
创作
登录
应无所住,而生其心
博主信息
排名
1
文章
860
粉丝
112
评论
163
文章类别
最新文章
最新评价
net core webapi post传递参数
庸人 : 确实坑哈，我也是下班好了好几次，发现后台传递对象是可以的，但...
百度编辑器自定义模板
庸人 : 我建议换个编辑器，因为现在百度富文本已经停止维护了，用tinymec...
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术
原

uniapp 微信小程序 上传图片，上传文件，上传视频等，上传组件封装

1765人阅读 2024/7/26 16:27 总访问：5182718 评论：0 收藏：0 手机
分类: 前端


上传图片文件还可以参考：https://www.tnblog.net/aojiancc2/article/details/8233 这个里边有关于.net6实现图片上传后端的

然后后台图片文件存储是自己搭建图片服务minio

实现的效果

上传图片之前的效果：

上传图片之后的效果：

封装的上传组件

  1. <!-- 
  2. 项目：图片上传插件
  3. 备注：接口的返回值是否符合插件所写的code=0，如果不是请复制 upload 和 asyncUpload 查找该方法 在注释的地方修改。
  4. -->
  5. <template>
  6.   <view class="w-100 imgupload">
  7.     <view class="w-100 flex_wrap">
  8.       <view :class="single ? 'single-css' : 'imgs-view'" v-for="(v, i) in imgArray" :key="i">
  9.         <image @click="preview(v, i)" :src="v.url"></image>
  10.         <view v-if="!disabled" :class="conf.style ? 'del-btn-style-' + conf.style : 'del-btn'" @click="delImg(i)">
  11.           <image v-if="conf.delIcon" :src="conf.delIcon"></image>
  12.           <text v-if="!conf.delIcon && conf.style == 1" class="icon_upload">&#xe785;</text>
  13.           <text v-if="!conf.delIcon && conf.style == 2" class="icon_upload">&#xe785;</text>
  14.         </view>
  15.         <view class="uploading flex_xy_center" :class="single ? 'single-css' : 'imgs-view'"
  16.           v-if="!v.upload && loading && startUpload">
  17.           <view>
  18.             <image v-if="conf.loadIcon" :src="conf.loadIcon"></image>
  19.             <text v-if="!conf.loadIcon && conf.style == 1" class="icon_upload">&#xe6a0;</text>
  20.             <text v-if="!conf.loadIcon && conf.style == 2" class="icon_upload">&#xe616;</text>
  21.             <view class="upload-txt">{{ conf.loadText || '上传中...' }}</view>
  22.           </view>
  23.         </view>
  25.         <view class="result" v-if="!conf.style && conf.resultTip && v.upload">
  26.           <label class="success" v-if="v.result === true">上传成功</label>
  27.           <label class="error" v-if="v.result === false">上传失败({{ v.msg }})</label>
  28.         </view>
  30.         <view v-if="conf.style == 1 && conf.resultTip && v.upload && !disabled" class="result-style"
  31.           :class="'result-' + (v.result ? 1 : 2)">
  32.           <view v-if="v.result == true"><text class="icon_upload">&#xe666;</text>上传成功</view>
  33.           <view v-if="v.result == false"><text class="icon_upload">&#xe785;</text>上传失败({{
  34.             v.msg
  35.           }})</view>
  36.         </view>
  37.       </view>
  38.       <view v-if="imgArray.length < imgCount && !disabled" :style="conf.borderStyle" class="flex_xy_center"
  39.         :class="single ? 'single-add' : 'upload-img-view'" @click="upPhoto">
  40.         <text v-if="conf.addStyle == '1'" class="icon_upload">&#xe615;</text>
  41.         <text v-if="conf.addStyle == '2'" class="icon_upload add">&#xe606;</text>
  42.       </view>
  43.     </view>
  44.     <view v-if="!closeTip && !tipObj.prompt" class="imgupload__tip">* 最多上传{{ imgCount }}张图片(<label> {{ imgArray.length }}
  45.       </label>/{{
  46.         imgCount
  47.       }})</view>
  48.     <view class="imgupload__tip" :style="{ color: tipObj.typeColor }" v-show="tipObj.prompt || tipObj.must">{{
  49.       tipObj.prompt }}
  50.     </view>
  52.     <button open-type="agreePrivacyAuthorization"></button>
  53.   </view>
  54. </template>
  56. <script>
  57. // 图片压缩
  58. import { compressAccurately } from 'image-conversion'
  59. export default {
  60.   name: 'imgUpload',
  61.   props: {
  62.     baseUrl: {
  63.       type: String,
  64.       default: ''
  65.     },
  66.     imgArr: {
  67.       //图片数组
  68.       type: [Array]
  69.     },
  70.     uploadImgCount: {
  71.       //一次上传图片数
  72.       type: String,
  73.       default: '3'
  74.     },
  75.     imgCount: {
  76.       //可上传图片总数
  77.       type: String,
  78.       default: '3'
  79.     },
  80.     imgSize: {
  81.       //图片大小 单位M
  82.       type: Number,
  83.       default: 2
  84.     },
  85.     disabled: {
  86.       //禁用
  87.       type: Boolean,
  88.       default: false
  89.     },
  90.     formData: {
  91.       type: Object,
  92.       default: function () {
  93.         return {}
  94.       }
  95.     },
  96.     imgType: {
  97.       //如果是小程序，这个值则没用作用
  98.       type: [Array],
  99.       default: function () {
  100.         return ['jpeg', 'png', 'jpg']
  101.       }
  102.     },
  103.     single: {
  104.       //只上传一张图片
  105.       type: Boolean,
  106.       default: false
  107.     },
  108.     closeTip: {
  109.       type: Boolean,
  110.       default: false
  111.     },
  112.     loading: {
  113.       type: Boolean,
  114.       default: true
  115.     },
  116.     url: {
  117.       //上传图片Url
  118.       type: String
  119.     },
  120.     async: {
  121.       type: Boolean,
  122.       default: false
  123.     },
  124.     header: {
  125.       type: Array,
  126.       default: function () {
  127.         return []
  128.       }
  129.     },
  130.     previewMany: {
  131.       //多图预览
  132.       type: Boolean,
  133.       default: false
  134.     },
  135.     pressImg: {
  136.       //压缩图片 H5暂不支持压缩api
  137.       type: Number,
  138.       default: -1
  139.     },
  140.     config: {
  141.       type: Object,
  142.       default: function () {
  143.         return {}
  144.       }
  145.     },
  146.     beforUploadHandle: {
  147.       type: Function,
  148.       default: () => {
  149.         new Promise()
  150.       }
  151.     }
  152.   },
  153.   data() {
  154.     return {
  155.       sysInfo: {},
  156.       imgArray: [],
  157.       canUpCount: '',
  158.       startUpload: false,
  159.       tipObj: {
  160.         prompt: '',
  161.         typeColor: '#009100',
  162.         must: false, //必须要存在的时候
  163.         success: '#009100', //成功-#009100; 可自定义修改
  164.         // warning: '#bb9300', // 警告 -#bb9300; 可自定义修改
  165.         error: '#FF0000', // 失败--#FF0000; 可自定义修改
  166.         warning: '#FF0000'
  167.       },
  168.       conf: {
  169.         delIcon: '', //删除图片icon
  170.         resultTip: true, //结果提示
  171.         style: '1', //组件默认风格
  172.         loadIcon: '', //加载时的图标
  173.         loadText: '', //加载时的文字
  174.         borderStyle: 'border:2rpx dotted #dadada',
  175.         addStyle: '2' //添加风格 1 图片标 2 加号标
  176.       },
  177.       headers: {},
  178.       curPlatform: '',
  179.       currIndex: null
  180.     }
  181.   },
  182.   created() {
  183.     this.getSysInfo()
  184.     this.imgArray = this.imgArr || []
  185.     this.changeImgArr(true)
  186.     this.canUpCount = this.single ? 1 : Number(this.uploadImgCount)
  187.     if (this.url) {
  188.       this.tipObj.prompt = ''
  189.     } else {
  190.       this.tipObj.prompt = '你没有传入上传url,请检查传入参数'
  191.       this.tipObj.typeColor = this.tipObj.error
  192.     }
  193.     this.changeHeader(this.header)
  194.     // 参数合并
  195.     this.conf = Object.assign(this.conf, this.config)
  196.   },
  197.   watch: {
  198.     imgArr(n, o) {
  199.       this.imgArray = n || []
  200.       this.changeImgArr(true)
  201.     },
  202.     imgCount(n, o) {
  203.       this.uploadImgCount = n
  204.       this.canUpCount = this.single ? 1 : Number(this.uploadImgCount)
  205.     },
  206.     url(n, o) {
  207.       if (n) {
  208.         this.tipObj.prompt = ''
  209.       } else {
  210.         this.tipObj.prompt = '你没有传入上传url,请检查传入参数'
  211.         this.tipObj.typeColor = this.tipObj.error
  212.       }
  213.     },
  214.     header(n, o) {
  215.       this.changeHeader(n)
  216.     },
  217.     config(n, o) {
  218.       this.conf = Object.assign(this.conf, this.config)
  219.     }
  220.   },
  221.   methods: {
  222.     upPhoto() {
  223.       let that = this
  224.       that.beforUploadHandle().then(() => {
  225.         if (!that.url) {
  226.           that.tipObj.prompt = '你没有传入上传url,请检查！'
  227.           that.tipObj.typeColor = that.tipObj.error
  228.           return
  229.         }
  230.         if (
  231.           Number(that.imgCount - that.imgArray.length) <
  232.           Number(that.uploadImgCount)
  233.         ) {
  234.           that.canUpCount = Number(that.imgCount - that.imgArray.length)
  235.         }
  236.         if (!that.tipObj.must) {
  237.           that.tipObj.prompt = ''
  238.         }
  239.         that.tipObj.must = false
  240.         uni.showActionSheet({
  241.           itemList: ['拍照上传', '从相册中选择'],
  242.           success: function (res) {
  243.             if (res.tapIndex == 0) {
  244.               uni.chooseMedia({
  245.                 count: Number(that.canUpCount),
  246.                 sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
  247.                 sourceType: ['camera'], //从相册选择
  248.                 success: function (res) {
  249.                   const addImgArray = []
  250.                   console.log(res.tempFiles)
  251.                   if (res) {
  252.                     if (res.tempFiles) {
  253.                       for (let item of res.tempFiles) {
  254.                         if (item.size > that.imgSize * 1024 * 1024) {
  255.                           uni.showToast({
  256.                             title: `图片不能大于${that.imgSize}M`,
  257.                             icon: 'none'
  258.                           })
  259.                           return false
  260.                         }
  261.                         if (item.type) {
  262.                           let r = that.imgType.some((v) => {
  263.                             let type = item.type.split('/')
  264.                             if (type.length) return v === type[1]
  265.                           })
  266.                           if (!r) {
  267.                             uni.showToast({
  268.                               title: `只允许上传${that.imgType}的类型`,
  269.                               icon: 'none'
  270.                             })
  271.                             return false
  272.                           }
  273.                         }
  274.                         addImgArray.push({ url: item.tempFilePath })
  275.                       }
  276.                     }
  277.                     that.currIndex = that.imgArray.length
  278.                     that.imgArray = [...that.imgArray, ...addImgArray]
  279.                     console.log(that.imgArray)
  280.                     // that.changeImgArr(false);
  281.                     if (that.pressImg >= 0) {
  282.                       //存在图片压缩 开启图片压缩
  283.                       if (that.checkPlatform()) {
  284.                         // H5环境下不支持
  285.                         that.pressImages()
  286.                       }
  287.                     } else {
  288.                       //正常异步提交
  289.                       that.hasAysnc()
  290.                     }
  291.                   }
  292.                 }
  293.               })
  294.             } else if (res.tapIndex == 1) {
  295.               uni.chooseMedia({
  296.                 count: Number(that.canUpCount),
  297.                 sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
  298.                 sourceType: ['album'], //从相册选择
  299.                 success: function (res) {
  300.                   const addImgArray = []
  301.                   if (res) {
  302.                     console.log(res.tempFiles)
  303.                     if (res.tempFiles) {
  304.                       for (let item of res.tempFiles) {
  305.                         if (item.size > that.imgSize * 1024 * 1024) {
  306.                           uni.showToast({
  307.                             title: `图片不能大于${that.imgSize}M`,
  308.                             icon: 'none'
  309.                           })
  310.                           return false
  311.                         }
  312.                         if (item.type) {
  313.                           let r = that.imgType.some((v) => {
  314.                             let type = item.type.split('/')
  315.                             if (type.length) return v === type[1]
  316.                           })
  317.                           if (!r) {
  318.                             uni.showToast({
  319.                               title: `只允许上传${that.imgType}的类型`,
  320.                               icon: 'none'
  321.                             })
  322.                             return false
  323.                           }
  324.                         }
  325.                         addImgArray.push({ url: item.tempFilePath })
  326.                       }
  327.                     }
  328.                     that.currIndex = that.imgArray.length
  329.                     that.imgArray = [...that.imgArray, ...addImgArray]
  331.                     console.log(that.imgArray)
  332.                     // that.changeImgArr(false);
  333.                     if (that.pressImg >= 0) {
  334.                       //存在图片压缩 开启图片压缩
  335.                       if (that.checkPlatform()) {
  336.                         // H5环境下不支持
  337.                         that.pressImages()
  338.                       }
  339.                     } else {
  340.                       //正常异步提交
  341.                       that.hasAysnc()
  342.                     }
  343.                   }
  344.                 },
  345.                 fail: function (res) {
  346.                   console.log(res)
  347.                 }
  348.               })
  349.             }
  350.           },
  351.           fail: function (res) {
  352.             console.log(res.errMsg)
  353.           }
  354.         })
  355.       })
  356.     },
  357.     preview(obj, index) {
  358.       if (this.previewMany) {
  359.         let urls = []
  360.         urls.push(obj.url)
  361.         this.imgArray.map((item) => {
  362.           if (obj.id != item.id) {
  363.             urls.push(item.url)
  364.           }
  365.         })
  366.         uni.previewImage({
  367.           urls: urls
  368.         })
  369.       } else {
  370.         // 预览图片(单张)
  371.         uni.previewImage({
  372.           urls: [obj.url]
  373.         })
  374.       }
  375.     },
  377.     changeImgArr(type) {
  378.       for (let index in this.imgArray) {
  379.         let item = this.imgArray[index]
  380.         if (!item.upload) {
  381.           if (item.upload === false) {
  382.             this.imgArray[index].url = item.url
  383.           } else {
  384.             this.imgArray[index] = {
  385.               id: item.id,
  386.               upload: type,
  387.               url: item.url,
  388.               result: type
  389.             }
  390.           }
  391.         }
  392.       }
  393.     },
  395.     pressImages() {
  396.       const _this = this
  397.       let success = 0
  398.       let completeNum = 0
  399.       for (let item of _this.imgArray) {
  400.         uni.compressImage({
  401.           src: item.url,
  402.           quality: _this.pressImg,
  403.           success: (res) => {
  404.             ++success
  405.             item.pressUrl = res.tempFilePath
  406.           },
  407.           error: (res) => {
  408.             console.log(res)
  409.           },
  410.           complete: (res) => {
  411.             ++completeNum
  412.             //等待全部压缩完成
  413.             if (completeNum === _this.imgArray.length) {
  414.               console.log(success)
  415.               if (success >= _this.imgArray.length) {
  416.                 _this.tipObj.prompt = '全部压缩成功！'
  417.                 _this.tipObj.typeColor = _this.tipObj.success
  418.               } else {
  419.                 let errorNum = _this.imgArray.length - success
  420.                 _this.tipObj.prompt = `${errorNum}个文件压缩失败`
  421.                 _this.tipObj.typeColor = _this.tipObj.warning
  422.               }
  423.               console.log('res', _this.imgArray)
  424.               if (_this.async) {
  425.                 //直接上传
  426.                 _this.asyncUpload()
  427.               }
  428.             }
  429.           }
  430.         })
  431.       }
  432.     },
  434.     asyncUpload() {
  435.       const _this = this
  436.       if (_this.imgArray.length) {
  437.         let length = _this.imgArray.length
  438.         _this.startUpload = true
  439.         _this.tipObj.prompt = ''
  440.         let result = []
  441.         //_this.currIndex;
  442.         for (let i = 0; i < length; i++) {
  443.           let item = _this.imgArray[i]
  444.           console.log(item)
  445.           let subUrl = _this.pressImg >= 0 ? item.pressUrl : item.url
  446.           if (!item.upload) {
  447.             _this.asyncUploadMethod(subUrl, i, (res) => {
  448.               if (res) {
  449.                 result.push(res)
  450.                 if (
  451.                   result.length == length ||
  452.                   length - _this.imgArr.length == result.length
  453.                 ) {
  454.                   if (_this.single) {
  455.                     _this.$emit('result', _this.imgArray[0])
  456.                   } else {
  457.                     console.log('list', _this.imgArray)
  458.                     _this.$emit('result', {
  459.                       all: _this.imgArray,
  460.                       new: result
  461.                     })
  462.                   }
  463.                 }
  464.               }
  465.             })
  466.           }
  467.         }
  468.       }
  469.     },
  471.     asyncUploadMethod(url, i, callback) {
  472.       const _this = this
  473.       uni.uploadFile({
  474.         url: _this.url,
  475.         filePath: url,
  476.         name: 'file',
  477.         header: _this.headers,
  478.         formData: _this.formData,
  479.         success: (uploadFileRes) => {
  480.           if (uploadFileRes.statusCode == 200) {
  481.             let res = JSON.parse(uploadFileRes.data)
  482.             /*注意 如果返回的结果字段不一样，请在这里做修改[res.code]*/
  483.             if (res.code === 0 || res.code === '0') {
  484.               //成功情况下
  485.               _this.imgArray[i].result = true
  486.               res.code = 0
  487.               // _this.imgArray[i].url = res.url; //这里
  488.               _this.imgArray[
  489.                 i
  490.               ].url = `${_this.baseUrl}/oss/api/ImageViewer/${res.data.id}.jpg?percent=0.2&quality=80&od=false`
  491.               _this.imgArray[i].id = res.data.id
  492.               callback(res)
  493.             } else {
  494.               _this.imgArray[i].result = false
  495.               _this.tipObj.prompt = '上传失败，请检查！'
  496.               _this.tipObj.typeColor = _this.tipObj.error
  497.             }
  498.           } else {
  499.             _this.imgArray[i].result = false
  500.           }
  501.         },
  502.         fail: (e) => {
  503.           _this.imgArray[i].result = false
  504.           _this.tipObj.prompt = '上传失败，请检查！'
  505.           _this.tipObj.typeColor = _this.tipObj.error
  506.           console.log(e)
  507.         },
  508.         complete: () => {
  509.           _this.imgArray[i].upload = true
  510.           _this.startUpload = false
  511.           _this.$forceUpdate()
  512.         }
  513.       })
  514.     },
  516.     delImg(i) {
  517.       const _this = this
  518.       uni.showModal({
  519.         title: '提示',
  520.         content: '是否删除这张照片？',
  521.         success: function (res) {
  522.           if (res.confirm) {
  523.             const delImgInfo = _this.imgArray[i]
  524.             _this.imgArray.splice(i, 1)
  525.             if (_this.async) {
  526.               _this.$emit('delImg', delImgInfo)
  527.             }
  528.           } else if (res.cancel) {
  529.           }
  530.         }
  531.       })
  532.     },
  534.     upload(callback) {
  535.       const _this = this
  536.       if (!_this.async) {
  537.         _this.tipObj.prompt = ''
  538.         if (_this.imgArray.length) {
  539.           this.startUpload = true
  540.           let successNum = 0
  541.           let urlArr = []
  542.           for (let item of _this.imgArray) {
  543.             _this.uploadImg(item, (res) => {
  544.               /*注意 如果返回的结果字段不一样，请在这里做修改[res.code]*/
  545.               if (res.code == 0) {
  546.                 successNum++
  547.                 urlArr.push(res.url) /*需要线上图片地址[res.fileVo]*/
  548.                 item.result = true
  549.               } else {
  550.                 urlArr.push(res)
  551.                 item.result = false
  552.                 item.msg = res.Message
  553.               }
  554.               item.upload = true
  555.               _this.$forceUpdate()
  556.               _this.tipObj.prompt =
  557.                 '正在上传...(成功' + successNum + '张/' + urlArr.length + '张)'
  558.               _this.tipObj.typeColor = _this.tipObj.success
  559.               if (urlArr.length == _this.imgArray.length) {
  560.                 _this.tipObj.prompt = '已全部上传完成！'
  561.                 _this.tipObj.typeColor = _this.tipObj.success
  562.                 if (successNum > 0) {
  563.                   _this.startUpload = false
  564.                   callback(_this.result(urlArr, successNum))
  565.                 } else {
  566.                   _this.startUpload = false
  567.                   callback(urlArr) //错误的返回
  568.                 }
  569.               }
  570.             })
  571.           }
  572.         } else {
  573.           _this.tipObj.prompt = '请先选择图片后上传！'
  574.           _this.tipObj.typeColor = _this.tipObj.warning
  575.         }
  576.       } else {
  577.         _this.tipObj.prompt = '在异步模式下无法调用upload方法。'
  578.         _this.tipObj.typeColor = _this.tipObj.warning
  579.       }
  580.     },
  582.     result(urlArr, successNum) {
  583.       let result = {
  584.         result: 'success',
  585.         code: 0,
  586.         urlArray: urlArr,
  587.         success: successNum
  588.       }
  589.       return result
  590.     },
  592.     uploadImg(item, callback) {
  593.       const _this = this
  594.       console.log(_this.formData)
  595.       let subUrl = _this.pressImg >= 0 ? item.pressUrl : item.url
  596.       console.log('文件上传')
  597.       uni.uploadFile({
  598.         url: _this.url,
  599.         filePath: subUrl,
  600.         formData: _this.formData,
  601.         header: _this.headers,
  602.         name: 'file',
  603.         success: (uploadFileRes) => {
  604.           if (uploadFileRes) {
  605.             let res = JSON.parse(uploadFileRes.data)
  606.             res.resCode = 0
  607.             callback(res)
  608.           }
  609.         },
  610.         fail: (e) => {
  611.           callback({
  612.             resCode: 500,
  613.             msg: '图片上传失败',
  614.             localUrl: item,
  615.             reason: e
  616.           })
  617.         }
  618.       })
  619.     },
  621.     changeHeader(header) {
  622.       const _this = this
  623.       if (Array.isArray(header)) {
  624.         for (let item of header) {
  625.           for (let key in item) {
  626.             _this.headers[key] = item[key]
  627.           }
  628.         }
  629.       } else {
  630.         _this.tipObj.prompt = '请使用数组格式的Header传参'
  631.         _this.tipObj.typeColor = _this.tipObj.error
  632.       }
  633.     },
  635.     //是异步方法的提交
  636.     hasAysnc() {
  637.       const that = this
  638.       if (that.async) {
  639.         let startIndex = that.imgArray.length
  640.         //直接上传
  641.         that.asyncUpload(startIndex)
  642.       } else {
  643.         that.$emit('result', {
  644.           code: 500,
  645.           msg: '同步模式下,我不会被调用哦~'
  646.         })
  647.       }
  648.     },
  650.     checkPlatform() {
  651.       const that = this
  652.       let canUse = true
  653.       //#ifdef H5
  654.       that.tipObj.prompt = '该环境不支持图片压缩，图片压缩功能不会生效。'
  655.       that.tipObj.must = true
  656.       that.tipObj.typeColor = that.tipObj.warning
  657.       canUse = false
  658.       that.hasAysnc()
  659.       //#endif
  660.       return canUse
  661.     },
  663.     getSysInfo() {
  664.       const that = this
  665.       try {
  666.         const res = uni.getSystemInfoSync()
  667.         that.sysInfo = {
  668.           screenWidth: res.screenWidth,
  669.           screenHeight: res.screenHeight
  670.         }
  671.       } catch (e) {
  672.         // error
  673.       }
  674.     }
  675.   }
  676. }
  677. </script>
  679. <style scoped>
  680. @font-face {
  681.   font-family: 'icon_upload';
  682.   /* project id 2170343 */
  683.   src: url('//at.alicdn.com/t/font_2170343_nij8dm8i18.eot');
  684.   src: url('//at.alicdn.com/t/font_2170343_nij8dm8i18.eot?#iefix') format('embedded-opentype'),
  685.     url('//at.alicdn.com/t/font_2170343_nij8dm8i18.woff2') format('woff2'),
  686.     url('//at.alicdn.com/t/font_2170343_nij8dm8i18.woff') format('woff'),
  687.     url('//at.alicdn.com/t/font_2170343_nij8dm8i18.ttf') format('truetype'),
  688.     url('//at.alicdn.com/t/font_2170343_nij8dm8i18.svg#iconfont') format('svg');
  689. }
  691. .icon_upload {
  692.   font-family: 'icon_upload' !important;
  693.   font-size: 30rpx;
  694.   font-style: normal;
  695.   -webkit-font-smoothing: antialiased;
  696.   -webkit-text-stroke-width: 0.2px;
  697.   -moz-osx-font-smoothing: grayscale;
  698. }
  700. .w-100 {
  701.   width: 100%;
  702. }
  704. .flex {
  705.   /* 转为弹性盒模型*/
  706.   display: flex;
  707. }
  709. .flex_bet {
  710.   /* 两端左右*/
  711.   display: flex;
  712.   justify-content: space-between;
  713. }
  715. .flex_wrap {
  716.   /* 转为弹性盒模型并自动换行*/
  717.   display: flex;
  718.   flex-wrap: wrap;
  719. }
  721. .flex_xy_center {
  722.   display: flex;
  723.   justify-content: center;
  724.   align-items: center;
  725. }
  727. .imgupload image {
  728.   height: 100%;
  729.   width: 100%;
  730. }
  732. .upload-img-view {
  733.   /* height: 200rpx;
  734.   width: 32%; */
  735.   width: 158rpx;
  736.   height: 158rpx;
  737.   border-radius: 10rpx;
  738.   border: 4rpx dotted #f1f1f1;
  739.   /* background-color: #F1F1F1; */
  740. }
  742. .single-add {
  743.   width: 100%;
  744.   height: inherit;
  745.   min-height: 200rpx;
  746.   border-radius: 10rpx;
  747.   border: 4rpx dotted #f1f1f1;
  748. }
  750. .upload-img-view>text,
  751. .single-add>text {
  752.   font-size: 70rpx;
  753.   color: #949494;
  754. }
  756. .upload-img-view .add,
  757. .single-add .add {
  758.   font-size: 55rpx;
  759. }
  761. .upload-txt {
  762.   font-size: 24rpx;
  763.   color: #ffffff;
  764. }
  766. .imgs-view {
  767.   /* height: 200rpx;
  768.   width: 31.5%; */
  769.   width: 158rpx;
  770.   height: 158rpx;
  771.   border-radius: 10rpx;
  772.   margin-right: 1.8%;
  773.   margin-bottom: 16rpx;
  774.   border: 1rpx solid #f1f1f1;
  775.   box-sizing: border-box;
  776.   position: relative;
  777. }
  779. .single-css {
  780.   width: 100%;
  781.   height: inherit;
  782.   min-height: 200rpx;
  783.   border-radius: 10rpx;
  784.   border: 1rpx solid #f1f1f1;
  785.   box-sizing: border-box;
  786.   position: relative;
  787. }
  789. .result {
  790.   position: absolute;
  791.   bottom: 0;
  792.   width: 100%;
  793.   height: 45rpx;
  794.   font-size: 26rpx;
  795.   left: 0;
  796.   background-color: rgba(0, 0, 0, 0.6);
  797.   text-align: center;
  798.   line-height: 45rpx;
  799.   border-bottom-left-radius: 10rpx;
  800.   border-bottom-right-radius: 10rpx;
  801. }
  803. .result>.success {
  804.   color: #00b900;
  805. }
  807. .result>.error {
  808.   color: #b52e25;
  809. }
  811. .uploading {
  812.   position: absolute;
  813.   background-color: rgba(0, 0, 0, 0.5);
  814.   left: 0;
  815.   top: 0;
  816.   width: 100%;
  817.   height: 100%;
  818.   text-align: center;
  819.   line-height: 100%;
  820.   z-index: 999;
  821. }
  823. .uploading image {
  824.   width: 60rpx;
  825.   height: 60rpx;
  826.   z-index: 1000;
  827.   animation: rotation 1s linear infinite;
  828.   -moz-animation: rotation 1s linear infinite;
  829.   -webkit-animation: rotation 1s linear infinite;
  830.   -o-animation: rotation 1s linear infinite;
  831. }
  833. .uploading text {
  834.   display: inline-block;
  835.   font-size: 50rpx;
  836.   color: #fffdef;
  837.   z-index: 1000;
  838.   animation: rotation 1s linear infinite;
  839.   -moz-animation: rotation 1s linear infinite;
  840.   -webkit-animation: rotation 1s linear infinite;
  841.   -o-animation: rotation 1s linear infinite;
  842. }
  844. @keyframes rotation {
  845.   from {
  846.     -webkit-transform: rotate(0deg);
  847.     transform: rotate(0deg);
  848.     -moz-transform: rotate(0deg);
  849.     -o-transform: rotate(0deg);
  850.   }
  852.   to {
  853.     -webkit-transform: rotate(360deg);
  854.     transform: rotate(360deg);
  855.     -moz-transform: rotate(360deg);
  856.     -o-transform: rotate(360deg);
  857.   }
  858. }
  860. .imgs-view>image,
  861. .single-css>image {
  862.   width: 100%;
  863.   height: 100%;
  864.   border-radius: 10rpx;
  865. }
  867. .imgupload__tip {
  868.   font-size: 24rpx;
  869.   color: #ff0000;
  870.   margin: 10rpx auto;
  871. }
  873. .imgupload__tip>label {
  874.   color: #009100;
  875. }
  877. .del-btn {
  878.   position: absolute;
  879.   top: 0;
  880.   right: 0;
  881.   width: 32rpx;
  882.   height: 32rpx;
  883.   z-index: 999;
  884. }
  886. .del-btn>image {
  887.   width: 100%;
  888.   height: 100%;
  889.   display: flex;
  890. }
  892. .del-btn-style-2 {
  893.   position: absolute;
  894.   top: 0;
  895.   right: 0;
  896.   width: 32rpx;
  897.   height: 32rpx;
  898.   z-index: 999;
  899. }
  901. .del-btn-style-1 {
  902.   position: absolute;
  903.   top: 0;
  904.   right: 0;
  905.   width: 44rpx;
  906.   height: 44rpx;
  907.   z-index: 10;
  908.   background: rgba(0, 0, 0, 0.3);
  909.   color: #ececec;
  910.   border-bottom-left-radius: 30rpx;
  911.   display: flex;
  912.   justify-content: center;
  913.   align-items: center;
  914.   font-size: 24rpx;
  915. }
  917. .result-style {
  918.   position: absolute;
  919.   bottom: 0;
  920.   left: 0;
  921.   right: 0;
  922.   /* width: 75%; */
  923.   height: 44rpx;
  924.   /* border-top-right-radius: 50rpx; */
  925.   display: flex;
  926.   justify-content: center;
  927.   align-items: center;
  928.   transition: all 0.5s ease;
  929.   transform: translateX(-100%);
  930.   opacity: 0.4;
  931. }
  933. .result-1 {
  934.   background: rgba(7, 169, 19, 0.75);
  935.   color: white;
  936.   transform: translateX(0%);
  937.   font-size: 24rpx;
  938.   opacity: 1;
  939. }
  941. .result-2 {
  942.   background: rgba(239, 0, 5, 0.7);
  943.   color: #dadada;
  944.   font-size: 24rpx;
  945.   transform: translateX(0%);
  946.   opacity: 1;
  947. }
  948. </style>

使用封装的上传的组件

核心代码如下：

  1. <template>
  3. <!-- 其他页面代码 -->
  5. <!-- 图片上传组件 -->
  6. <imgUpload ref="imgUploadRef" :baseUrl="config.baseUrl" :formData="imgFormData" :imgArr="subData.ImaArray"
  7.     :header="header" imgCount="9" uploadImgCount="9" :imgSize="30" :url="uploadUrl" :async="true"
  8.     :previewMany="true" :pressImg="50" :beforUploadHandle="addImgBeforHandle" />>
  10. <!-- 其他页面代码 -->
  12. </template>
  14. <script setup lang="ts">
  16. import { ref, reactive } from 'vue'
  17. import { onLoad, onShow } from '@dcloudio/uni-app'
  18. import config from '@/common/config.ts'
  19. import dayjs from 'dayjs'
  21. // 引用图片上传的组件
  22. import imgUpload from '@/pages/components/imgUpload.vue'
  24. // ------------------------图片上传相关----------------------------
  26. let info = uni.getStorageSync('loginInfo')
  27. const token = info?.resData?.access_token
  28. const header = ref([{ Authorization: `Bearer ${token}` }])
  30. const addImgBeforHandle = (file: any) => {
  31.   // console.log(file)
  32.   return new Promise((resolve, reject) => {
  33.     resolve(1)
  34.   })
  35. }
  37. // 图片上传请求的后端地址（这个一般后端会统一封装的）
  38. const uploadUrl = ref(`${config.baseUrl}/oss/api/SmartFiles/UpLoadFormFile`)
  39. // 图片上传携带的参数
  40. const imgFormData = reactive({
  41.   // 图片桶的名称
  42.   BucketName: 'teacher-growing',
  43.   /* 
  44.   桶里边存放图片的文件夹，一月一个文件夹，防止单个文件夹的图片数量过多了
  45.   （这个也可以在后台上传接口的时候处理，前面就可以不用管这个了，当然也可以传就相当于是一个二级文件夹）
  46.   */
  47.   FilePath: dayjs().format('YYYYMM'),
  48.   FileType: 1
  49. })
  51. // 提交携带的参数，除了图片还有一些其他的参数根据自己实际项目需求来即可
  52. const subData = reactive<{
  53.   TaskTitle: string
  54.   Comment: string
  55.   // 图片上传后存储的参数
  56.   ImaArray: Array<any>
  57.   Tag: string
  58. }>({
  59.   TaskTitle: '',
  60.   Comment: '',
  61.   ImaArray: [],
  62.   Tag: ''
  63. })
  65. </script>

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

uniapp APP开发基础
前言uniapp是基于vue.js实现的，代码实现方法不能用jQuery的思路去解决问题，基本使用template: 模板view: 视图，使用时把v...

uniapp页面跳转传递参数过长
前言页面传递参数过长如果需要传递的参数content过长，传递的时候会有问题所以使用encodeURIComponent来传递uni.navigateTo...

uniapp webview跳转到app内部页面
官方文档：https://ask.dcloud.net.cn/article/35083相关问题：https://ask.dcloud.net.cn/question/93777引入需要的Js:&lt...

uniapp中webview跳转到app内部页面
官方文档：https://ask.dcloud.net.cn/article/35083第一步：在webview加载的页面引入Js&lt;!--uni的SDK，必须引用。--&gt;...

uniapp返回上一级页面刷新页面
当前页面： //uniapp返回上一级页面刷新页面 let pages = getCurrentPages(); // 当前页面 let beforePage ...

uniapp uni.navigateBack无法返回
注意测试的时候，不要直接打开当前页进行测试。要从其他页面点进去在返回测试。不然你获取上一页是没有的，就会报错。

uniapp确认提示框
代码如下： uni.showModal({ title: &#39;提示&#39;, content: &#39;这是一个模态弹窗&#39;, success: fun...

uni-app 微信小程序 上传图片文件，uniapp。uni-file-picker 和数据一起上传图片，上传图片的时候携带数据。多图上传
[TOC]uni-app中上传图片可以使用方法uni.uploadFileuni.uploadFile官方文档：https://uniapp.dcloud.net.cn/api/request/ne...

uniapp预览图片详解
一、预览图片的基本用法在uniapp中，我们可以使用uni.previewImage()API对图片进行预览，具体使用方法如下： uni.previewI...

uniapp文档在线浏览，pdfexcelword等
示例代码uni.downloadFile({ url: &#39;https://example.com/somefile.pdf&#39;, success: function (res) { va...

uniapp vue3 引用样式表样式
这样即可： &lt;style scoped lang=&quot;scss&quot;&gt; @import &#39;@/static/css/report-box.scss&#39;; &lt;/style...

uniapp 离线打包配置
下载Android Studio 并配置好JavaSDK查看HBuilderX版本然后去下载对应的SDK版本https://pan.baidu.com/s/1ZYxRVH23EbldPQqO...

uniapp 离线打包配置高德地图
没有申请key的去高德开放平台申请的Android平台Keyhttps://console.amap.com/dev/key/app SHA1 在前面申请云端证书里面找 ...

uniapp 应用热更新，进度条/权限
/** * 检查安装应用权限 */ checkInstallPermission() { return new Promise((resolve, reject) =&gt; { tr...

uniapp plus.runtime.install 安装失败
APP 权限配置添加&quot;&lt;uses-permission android:name=\&quot;android.permission.REQUEST_INSTALL_PACKAGES\&quot;/&g...