uniapp 上传图片

上传图片，效果图

image.png

    
        
            
        
        
            
             
        
    

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)
                    }
            }
        })
    },

}

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
####

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

}
function RotateLeft(lValue, iShiftBits) {
return (lValue << iShiftBits) | (lValue >>> (32-iShiftBits));
}
function AddUnsigned(lX, lY) {
var lX4, lY4, lX8, lY8, lResult;
lX8 = (lX & 0x80000000);
lY8 = (lY & 0x80000000);
lX4 = (lX & 0x40000000);
lY4 = (lY & 0x40000000);
lResult = (lX & 0x3FFFFFFF)+(lY & 0x3FFFFFFF);
if (lX4 & lY4) {
return (lResult ^ 0x80000000 ^ lX8 ^ lY8);
}
if (lX4 | lY4) {
if (lResult & 0x40000000) {
return (lResult ^ 0xC0000000 ^ lX8 ^ lY8);
} else {
return (lResult ^ 0x40000000 ^ lX8 ^ lY8);
}
} else {
return (lResult ^ lX8 ^ lY8);
}
}
function F(x, y, z) {
return (x & y) | ((~x) & z);
}
function G(x, y, z) {
return (x & z) | (y & (~z));
}
function H(x, y, z) {
return (x ^ y ^ z);
}
function I(x, y, z) {
return (y ^ (x | (~z)));
}
function FF(a, b, c, d, x, s, ac) {
a = AddUnsigned(a, AddUnsigned(AddUnsigned(F(b, c, d), x), ac));
return AddUnsigned(RotateLeft(a, s), b);
}
function GG(a, b, c, d, x, s, ac) {
a = AddUnsigned(a, AddUnsigned(AddUnsigned(G(b, c, d), x), ac));
return AddUnsigned(RotateLeft(a, s), b);
}
function HH(a, b, c, d, x, s, ac) {
a = AddUnsigned(a, AddUnsigned(AddUnsigned(H(b, c, d), x), ac));
return AddUnsigned(RotateLeft(a, s), b);
}
function II(a, b, c, d, x, s, ac) {
a = AddUnsigned(a, AddUnsigned(AddUnsigned(I(b, c, d), x), ac));
return AddUnsigned(RotateLeft(a, s), b);
}
function ConvertToWordArray(string) {
var lWordCount;
var lMessageLength = string.length;
var lNumberOfWords_temp1 = lMessageLength+8;
var lNumberOfWords_temp2 = (lNumberOfWords_temp1-(lNumberOfWords_temp1%64))/64;
var lNumberOfWords = (lNumberOfWords_temp2+1)16;
var lWordArray = Array(lNumberOfWords-1);
var lBytePosition = 0;
var lByteCount = 0;
while (lByteCount lWordCount = (lByteCount-(lByteCount%4))/4;
lBytePosition = (lByteCount%4)8;
lWordArray[lWordCount] = (lWordArray[lWordCount] | (string.charCodeAt(lByteCount) << lBytePosition));
lByteCount++;
}
lWordCount = (lByteCount-(lByteCount%4))/4;
lBytePosition = (lByteCount%4)8;
lWordArray[lWordCount] = lWordArray[lWordCount] | (0x80 << lBytePosition);
lWordArray[lNumberOfWords-2] = lMessageLength << 3;
lWordArray[lNumberOfWords-1] = lMessageLength >>> 29;
return lWordArray;
}
function WordToHex(lValue) {
var WordToHexValue = "", WordToHexValue_temp = "", lByte, lCount;
for (lCount=0; lCount<=3; lCount++) {
lByte = (lValue >>> (lCount8)) & 255;
WordToHexValue_temp = "0"+lByte.toString(16);
WordToHexValue = WordToHexValue+WordToHexValue_temp.substr(WordToHexValue_temp.length-2, 2);
}
return WordToHexValue;
}
function Utf8Encode(string) {
var utftext = "";
for (var n = 0; n var c = string.charCodeAt(n);
if (c<128) {
utftext += String.fromCharCode(c);
} else if ((c>127) && (c<2048)) {
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
} else {
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 63) | 128);
}
}
return utftext;
}

export default hex_md5;