uni-app上传图片

效果图：

1.

<view class="showimg_box">
    <view class="show_img">
        <image :src="pingjiaSrc" @tap="ChooseImage" ></image>
    </view>
    <view  v-for="(item,index) in imgList" :key="index" class=" imgarr">
        <view class="icon-cuo" @tap="delect(index)">&#xe61a;</view>
         <image class="images" :src="item" @click="lookImg(index)"></image>
    </view>
</view>

2. js

import hex_md5 from "@/common/md5.js";
data(){
    
    
return{
    
    
imgList:[],
imgArr:"",
pingjiaSrc:this.adminIp + "content/image/pingjia.png",
}
}，
methods：{
    
    
   ChooseImage() {
    
    
        var _this = this;
          uni.chooseImage({
    
    
             count: 4, //默认9
             sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
             sourceType: ['album', 'camera'], //从相册选择和拍照
              success: (res) => {
    
    
                var tempFilePaths = res.tempFilePaths;
                if (_this.imgList.length+tempFilePaths.length > _this.imgMaxNum) {
    
    
                    uni.showToast({
    
    
                         title: '超过上传图片的最大数量',
                         icon: 'none'
                    })
                } else {
    
    
                     if (_this.imgList.length != 0) {
    
    
                      _this.imgList = _this.imgList.concat(res.tempFilePaths);
                        } else {
    
    
                           _this.imgList = res.tempFilePaths;
                        }
                for (var i = 0; i < tempFilePaths.length; i++) {
    
    
                    let timestamp = new Date().getTime();
                    let enMsg = hex_md5('@' + hex_md5('@' + timestamp + '~') + '~');
                    uni.uploadFile({
    
    
                       url: this.adminIp + 'Interface/Interface/UploadImg',//上传的服务器地址
                       filePath: tempFilePaths[i],
                       method: 'POST',
                       name: "file", 
                       formData: {
    
    
                        timestamp:timestamp,                                                    
                        enMsg:enMsg                                                         
                        },
                        success: res => {
    
    
                           let img = JSON.parse(res.data).data
                           _this.imgArr +=img + ","
                          console.log("上传图片",_this.imgArr);
                        }
                      });
                  }
                }
           }
       });
   },
//查看图片
    lookImg: function(val) {
    
    
        const urls = this.imgList
        const current = val
        uni.previewImage({
    
    
            urls,
            current
             })
        },
    delect(index){
    
    
        uni.showModal({
    
    
            title: "提示",
            content: "是否要删除该图片",
            success: (res) => {
    
    
                if (res.confirm) {
    
    
                this.imgList.splice(index, 1)
                    }
            }
        })
    },

}

3. css

.showimg_box{
    
    
        display: flex;
        align-items: center;
        margin-top: 20upx;
        
    }
    .show_img{
    
    
        width: 140upx;
        height: 140upx;
        border: 2upx dashed #eee;
        margin: 20upx 0;
        image{
    
    
            width: 100%;
            height: 100%;
            border: 2upx dashed #eee;
        }
    }
    .images{
    
    
        width: 140upx;
        height: 140upx;
        z-index: 999;
    }

    .imgarr{
    
    
    display: flex;
    align-items: center;
    position: relative;
    margin: 0 10upx;
    }
    .icon-cuo {
    
    
         font-family: 'iconfont';  
        position: absolute;
        right: 0;
        top: 5upx;
        background: linear-gradient(90deg,rgba(251,91,80,1) 0%,rgba(240,45,51,1) 100%);
        color: #FFFFFF;
        z-index: 10009;
        border-radius:50%;
    }
####
md5.js
####

4.

function hex_md5(string) {
    
        
var x = Array();    
var k, AA, BB, CC, DD, a, b, c, d;    
var S11 = 7, S12 = 12, S13 = 17, S14 = 22;    
var S21 = 5, S22 = 9, S23 = 14, S24 = 20;    
var S31 = 4, S32 = 11, S33 = 16, S34 = 23;    
var S41 = 6, S42 = 10, S43 = 15, S44 = 21;    
string = Utf8Encode(string);    
x = ConvertToWordArray(string);    
a = 0x67452301;    
b = 0xEFCDAB89;    
c = 0x98BADCFE;    
d = 0x10325476;    
for (k=0; k<x.length; k += 16) {
    
        
    AA = a;    
    BB = b;    
    CC = c;    
    DD = d;    
    a = FF(a, b, c, d, x[k+0], S11, 0xD76AA478);    
    d = FF(d, a, b, c, x[k+1], S12, 0xE8C7B756);    
    c = FF(c, d, a, b, x[k+2], S13, 0x242070DB);    
    b = FF(b, c, d, a, x[k+3], S14, 0xC1BDCEEE);    
    a = FF(a, b, c, d, x[k+4], S11, 0xF57C0FAF);    
    d = FF(d, a, b, c, x[k+5], S12, 0x4787C62A);    
    c = FF(c, d, a, b, x[k+6], S13, 0xA8304613);    
    b = FF(b, c, d, a, x[k+7], S14, 0xFD469501);    
    a = FF(a, b, c, d, x[k+8], S11, 0x698098D8);    
    d = FF(d, a, b, c, x[k+9], S12, 0x8B44F7AF);    
    c = FF(c, d, a, b, x[k+10], S13, 0xFFFF5BB1);    
    b = FF(b, c, d, a, x[k+11], S14, 0x895CD7BE);    
    a = FF(a, b, c, d, x[k+12], S11, 0x6B901122);    
    d = FF(d, a, b, c, x[k+13], S12, 0xFD987193);    
    c = FF(c, d, a, b, x[k+14], S13, 0xA679438E);    
    b = FF(b, c, d, a, x[k+15], S14, 0x49B40821);    
    a = GG(a, b, c, d, x[k+1], S21, 0xF61E2562);    
    d = GG(d, a, b, c, x[k+6], S22, 0xC040B340);    
    c = GG(c, d, a, b, x[k+11], S23, 0x265E5A51);    
    b = GG(b, c, d, a, x[k+0], S24, 0xE9B6C7AA);    
    a = GG(a, b, c, d, x[k+5], S21, 0xD62F105D);    
    d = GG(d, a, b, c, x[k+10], S22, 0x2441453);    
    c = GG(c, d, a, b, x[k+15], S23, 0xD8A1E681);    
    b = GG(b, c, d, a, x[k+4], S24, 0xE7D3FBC8);    
    a = GG(a, b, c, d, x[k+9], S21, 0x21E1CDE6);    
    d = GG(d, a, b, c, x[k+14], S22, 0xC33707D6);    
    c = GG(c, d, a, b, x[k+3], S23, 0xF4D50D87);    
    b = GG(b, c, d, a, x[k+8], S24, 0x455A14ED);    
    a = GG(a, b, c, d, x[k+13], S21, 0xA9E3E905);    
    d = GG(d, a, b, c, x[k+2], S22, 0xFCEFA3F8);    
    c = GG(c, d, a, b, x[k+7], S23, 0x676F02D9);    
    b = GG(b, c, d, a, x[k+12], S24, 0x8D2A4C8A);    
    a = HH(a, b, c, d, x[k+5], S31, 0xFFFA3942);    
    d = HH(d, a, b, c, x[k+8], S32, 0x8771F681);    
    c = HH(c, d, a, b, x[k+11], S33, 0x6D9D6122);    
    b = HH(b, c, d, a, x[k+14], S34, 0xFDE5380C);    
    a = HH(a, b, c, d, x[k+1], S31, 0xA4BEEA44);    
    d = HH(d, a, b, c, x[k+4], S32, 0x4BDECFA9);    
    c = HH(c, d, a, b, x[k+7], S33, 0xF6BB4B60);    
    b = HH(b, c, d, a, x[k+10], S34, 0xBEBFBC70);    
    a = HH(a, b, c, d, x[k+13], S31, 0x289B7EC6);    
    d = HH(d, a, b, c, x[k+0], S32, 0xEAA127FA);    
    c = HH(c, d, a, b, x[k+3], S33, 0xD4EF3085);    
    b = HH(b, c, d, a, x[k+6], S34, 0x4881D05);    
    a = HH(a, b, c, d, x[k+9], S31, 0xD9D4D039);    
    d = HH(d, a, b, c, x[k+12], S32, 0xE6DB99E5);    
    c = HH(c, d, a, b, x[k+15], S33, 0x1FA27CF8);    
    b = HH(b, c, d, a, x[k+2], S34, 0xC4AC5665);    
    a = II(a, b, c, d, x[k+0], S41, 0xF4292244);    
    d = II(d, a, b, c, x[k+7], S42, 0x432AFF97);    
    c = II(c, d, a, b, x[k+14], S43, 0xAB9423A7);    
    b = II(b, c, d, a, x[k+5], S44, 0xFC93A039);    
    a = II(a, b, c, d, x[k+12], S41, 0x655B59C3);    
    d = II(d, a, b, c, x[k+3], S42, 0x8F0CCC92);    
    c = II(c, d, a, b, x[k+10], S43, 0xFFEFF47D);    
    b = II(b, c, d, a, x[k+1], S44, 0x85845DD1);    
    a = II(a, b, c, d, x[k+8], S41, 0x6FA87E4F);    
    d = II(d, a, b, c, x[k+15], S42, 0xFE2CE6E0);    
    c = II(c, d, a, b, x[k+6], S43, 0xA3014314);    
    b = II(b, c, d, a, x[k+13], S44, 0x4E0811A1);    
    a = II(a, b, c, d, x[k+4], S41, 0xF7537E82);    
    d = II(d, a, b, c, x[k+11], S42, 0xBD3AF235);    
    c = II(c, d, a, b, x[k+2], S43, 0x2AD7D2BB);    
    b = II(b, c, d, a, x[k+9], S44, 0xEB86D391);    
    a = AddUnsigned(a, AA);    
    b = AddUnsigned(b, BB);    
    c = AddUnsigned(c, CC);    
    d = AddUnsigned(d, DD);    
}    
var temp = WordToHex(a)+WordToHex(b)+WordToHex(c)+WordToHex(d);    
return temp.toUpperCase();