devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序使用formdata传参上传图片_小程序以formdata方式上传图片

作者：盐析白兔 | 2024-05-18 04:33:51

赞

踩

小程序以formdata方式上传图片

先看下接口

 方法：

需要自己写formdata，因为小程序中不支持formdata传参

建立一个formdata文件夹，以及两个子文件

 index.js

  1. import mimeMap from './mimeMap'
  2.  
  3. function FormData(){
  4.   let fileManager = wx.getFileSystemManager();
  5.   let data = {};
  6.   let files = [];
  7.  
  8.   this.append = (name, value)=>{
  9.     data[name] = value;
  10.     return true;
  11.   }
  12.  
  13.   this.appendFile = (name, path)=>{
  14.     let buffer = fileManager.readFileSync(path);
  15.     if(Object.prototype.toString.call(buffer).indexOf("ArrayBuffer") < 0){
  16.       return false;
  17.     }
  18.     files.push({
  19.       name: name,
  20.       buffer: buffer,
  21.       fileName: getFileNameFromPath(path)
  22.     });
  23.     return true;
  24.   }
  25.  
  26.   this.getData = ()=>convert(data, files)
  27. }
  28.  
  29. function getFileNameFromPath(path){
  30.   let idx=path.lastIndexOf("/");
  31.   return path.substr(idx+1);
  32. }
  33.  
  34. function convert(data, files){
  35.   let boundaryKey = 'wxmpFormBoundary' + randString(); // 数据分割符，一般是随机的字符串
  36.   let boundary = '--' + boundaryKey;
  37.   let endBoundary = boundary + '--';
  38.  
  39.   let postArray = [];
  40.   //拼接参数
  41.   if(data && Object.prototype.toString.call(data) == "[object Object]"){
  42.     for(let key in data){
  43.       postArray = postArray.concat(formDataArray(boundary, key, data[key]));
  44.     }
  45.   }
  46.   //拼接文件
  47.   if(files && Object.prototype.toString.call(files) == "[object Array]"){
  48.     for(let i in files){
  49.       let file = files[i];
  50.       postArray = postArray.concat(formDataArray(boundary, file.name, file.buffer, file.fileName));
  51.     }
  52.   }
  53.   //结尾
  54.   let endBoundaryArray = [];
  55.   for (var i = 0; i < endBoundary.length; i++) { // 最后取出结束boundary的charCode
  56.     endBoundaryArray.push(...endBoundary.utf8CodeAt(i));
  57.   }
  58.   postArray = postArray.concat(endBoundaryArray);
  59.   return {
  60.     contentType: 'multipart/form-data; boundary=' + boundaryKey,
  61.     buffer: new Uint8Array(postArray).buffer
  62.   }
  63. }
  64.  
  65. function randString() {
  66.   let res = "";
  67.   for (let i = 0; i < 17; i++) {
  68.     let n = parseInt(Math.random() * 62);
  69.     if (n <= 9) {
  70.       res += n;
  71.     }
  72.     else if (n <= 35) {
  73.       res += String.fromCharCode(n + 55);
  74.     }
  75.     else {
  76.       res += String.fromCharCode(n + 61);
  77.     }
  78.   }
  79.   return res;
  80. }
  81.  
  82. function formDataArray(boundary, name, value, fileName){
  83.   let dataString = '';
  84.   let isFile = !!fileName;
  85.  
  86.   dataString += boundary + '\r\n';
  87.   dataString += 'Content-Disposition: form-data; name="' + name + '"';
  88.   if (isFile){
  89.     dataString += '; filename="' + fileName + '"' + '\r\n';
  90.     dataString += 'Content-Type: ' + getFileMime(fileName) + '\r\n\r\n';
  91.   }
  92.   else{
  93.     dataString += '\r\n\r\n';
  94.     dataString += value;
  95.   }
  96.  
  97.   var dataArray = [];
  98.   for (var i = 0; i < dataString.length; i++) { // 取出文本的charCode（10进制）
  99.     dataArray.push(...dataString.utf8CodeAt(i));
  100.   }
  101.  
  102.   if (isFile) {
  103.     let fileArray = new Uint8Array(value);
  104.     dataArray = dataArray.concat(Array.prototype.slice.call(fileArray));
  105.   }
  106.   dataArray.push(..."\r".utf8CodeAt());
  107.   dataArray.push(..."\n".utf8CodeAt());
  108.  
  109.   return dataArray;
  110. }
  111.  
  112. function getFileMime(fileName){
  113.   let idx = fileName.lastIndexOf(".");
  114.   let mime = mimeMap[fileName.substr(idx)];
  115.   return mime?mime:"application/octet-stream"
  116. }
  117.  
  118. String.prototype.utf8CodeAt = function(i) {
  119.   var str = this;
  120.   var out = [], p = 0;
  121.   var c = str.charCodeAt(i);
  122.   if (c < 128) {
  123.     out[p++] = c;
  124.   } else if (c < 2048) {
  125.     out[p++] = (c >> 6) | 192;
  126.     out[p++] = (c & 63) | 128;
  127.   } else if (
  128.       ((c & 0xFC00) == 0xD800) && (i + 1) < str.length &&
  129.       ((str.charCodeAt(i + 1) & 0xFC00) == 0xDC00)) {
  130.     // Surrogate Pair
  131.     c = 0x10000 + ((c & 0x03FF) << 10) + (str.charCodeAt(++i) & 0x03FF);
  132.     out[p++] = (c >> 18) | 240;
  133.     out[p++] = ((c >> 12) & 63) | 128;
  134.     out[p++] = ((c >> 6) & 63) | 128;
  135.     out[p++] = (c & 63) | 128;
  136.   } else {
  137.     out[p++] = (c >> 12) | 224;
  138.     out[p++] = ((c >> 6) & 63) | 128;
  139.     out[p++] = (c & 63) | 128;
  140.   }
  141.   return out;
  142. };
  143.  
  144.  
  145. export default FormData;

mimeMap.js

  1. const mimeMap = {
  2.     "0.001": "application/x-001",
  3.     "0.323": "text/h323",
  4.     "0.907": "drawing/907",
  5.     ".acp": "audio/x-mei-aac",
  6.     ".aif": "audio/aiff",
  7.     ".aiff": "audio/aiff",
  8.     ".asa": "text/asa",
  9.     ".asp": "text/asp",
  10.     ".au": "audio/basic",
  11.     ".awf": "application/vnd.adobe.workflow",
  12.     ".bmp": "application/x-bmp",
  13.     ".c4t": "application/x-c4t",
  14.     ".cal": "application/x-cals",
  15.     ".cdf": "application/x-netcdf",
  16.     ".cel": "application/x-cel",
  17.     ".cg4": "application/x-g4",
  18.     ".cit": "application/x-cit",
  19.     ".cml": "text/xml",
  20.     ".cmx": "application/x-cmx",
  21.     ".crl": "application/pkix-crl",
  22.     ".csi": "application/x-csi",
  23.     ".cut": "application/x-cut",
  24.     ".dbm": "application/x-dbm",
  25.     ".dcd": "text/xml",
  26.     ".der": "application/x-x509-ca-cert",
  27.     ".dib": "application/x-dib",
  28.     ".doc": "application/msword",
  29.     ".drw": "application/x-drw",
  30.     ".dwf": "Model/vnd.dwf",
  31.     ".dwg": "application/x-dwg",
  32.     ".dxf": "application/x-dxf",
  33.     ".emf": "application/x-emf",
  34.     ".ent": "text/xml",
  35.     ".eps": "application/x-ps",
  36.     ".etd": "application/x-ebx",
  37.     ".fax": "image/fax",
  38.     ".fif": "application/fractals",
  39.     ".frm": "application/x-frm",
  40.     ".gbr": "application/x-gbr",
  41.     ".gif": "image/gif",
  42.     ".gp4": "application/x-gp4",
  43.     ".hmr": "application/x-hmr",
  44.     ".hpl": "application/x-hpl",
  45.     ".hrf": "application/x-hrf",
  46.     ".htc": "text/x-component",
  47.     ".html": "text/html",
  48.     ".htx": "text/html",
  49.     ".ico": "image/x-icon",
  50.     ".iff": "application/x-iff",
  51.     ".igs": "application/x-igs",
  52.     ".img": "application/x-img",
  53.     ".isp": "application/x-internet-signup",
  54.     ".java": "java/*",
  55.     ".jpe": "image/jpeg",
  56.     ".jpeg": "image/jpeg",
  57.     ".jpg": "application/x-jpg",
  58.     ".jsp": "text/html",
  59.     ".lar": "application/x-laplayer-reg",
  60.     ".lavs": "audio/x-liquid-secure",
  61.     ".lmsff": "audio/x-la-lms",
  62.     ".ltr": "application/x-ltr",
  63.     ".m2v": "video/x-mpeg",
  64.     ".m4e": "video/mpeg4",
  65.     ".man": "application/x-troff-man",
  66.     ".mdb": "application/msaccess",
  67.     ".mfp": "application/x-shockwave-flash",
  68.     ".mhtml": "message/rfc822",
  69.     ".mid": "audio/mid",
  70.     ".mil": "application/x-mil",
  71.     ".mnd": "audio/x-musicnet-download",
  72.     ".mocha": "application/x-javascript",
  73.     ".mp1": "audio/mp1",
  74.     ".mp2v": "video/mpeg",
  75.     ".mp4": "video/mpeg4",
  76.     ".mpd": "application/vnd.ms-project",
  77.     ".mpeg": "video/mpg",
  78.     ".mpga": "audio/rn-mpeg",
  79.     ".mps": "video/x-mpeg",
  80.     ".mpv": "video/mpg",
  81.     ".mpw": "application/vnd.ms-project",
  82.     ".mtx": "text/xml",
  83.     ".net": "image/pnetvue",
  84.     ".nws": "message/rfc822",
  85.     ".out": "application/x-out",
  86.     ".p12": "application/x-pkcs12",
  87.     ".p7c": "application/pkcs7-mime",
  88.     ".p7r": "application/x-pkcs7-certreqresp",
  89.     ".pc5": "application/x-pc5",
  90.     ".pcl": "application/x-pcl",
  91.     ".pdf": "application/pdf",
  92.     ".pdx": "application/vnd.adobe.pdx",
  93.     ".pgl": "application/x-pgl",
  94.     ".pko": "application/vnd.ms-pki.pko",
  95.     ".plg": "text/html",
  96.     ".plt": "application/x-plt",
  97.     ".png": "application/x-png",
  98.     ".ppa": "application/vnd.ms-powerpoint",
  99.     ".pps": "application/vnd.ms-powerpoint",
  100.     ".ppt": "application/x-ppt",
  101.     ".prf": "application/pics-rules",
  102.     ".prt": "application/x-prt",
  103.     ".ps": "application/postscript",
  104.     ".pwz": "application/vnd.ms-powerpoint",
  105.     ".ra": "audio/vnd.rn-realaudio",
  106.     ".ras": "application/x-ras",
  107.     ".rdf": "text/xml",
  108.     ".red": "application/x-red",
  109.     ".rjs": "application/vnd.rn-realsystem-rjs",
  110.     ".rlc": "application/x-rlc",
  111.     ".rm": "application/vnd.rn-realmedia",
  112.     ".rmi": "audio/mid",
  113.     ".rmm": "audio/x-pn-realaudio",
  114.     ".rms": "application/vnd.rn-realmedia-secure",
  115.     ".rmx": "application/vnd.rn-realsystem-rmx",
  116.     ".rp": "image/vnd.rn-realpix",
  117.     ".rsml": "application/vnd.rn-rsml",
  118.     ".rtf": "application/msword",
  119.     ".rv": "video/vnd.rn-realvideo",
  120.     ".sat": "application/x-sat",
  121.     ".sdw": "application/x-sdw",
  122.     ".slb": "application/x-slb",
  123.     ".slk": "drawing/x-slk",
  124.     ".smil": "application/smil",
  125.     ".snd": "audio/basic",
  126.     ".sor": "text/plain",
  127.     ".spl": "application/futuresplash",
  128.     ".ssm": "application/streamingmedia",
  129.     ".stl": "application/vnd.ms-pki.stl",
  130.     ".sty": "application/x-sty",
  131.     ".swf": "application/x-shockwave-flash",
  132.     ".tg4": "application/x-tg4",
  133.     ".tif": "image/tiff",
  134.     ".tiff": "image/tiff",
  135.     ".top": "drawing/x-top",
  136.     ".tsd": "text/xml",
  137.     ".uin": "application/x-icq",
  138.     ".vcf": "text/x-vcard",
  139.     ".vdx": "application/vnd.visio",
  140.     ".vpg": "application/x-vpeg005",
  141.     ".vsd": "application/x-vsd",
  142.     ".vst": "application/vnd.visio",
  143.     ".vsw": "application/vnd.visio",
  144.     ".vtx": "application/vnd.visio",
  145.     ".wav": "audio/wav",
  146.     ".wb1": "application/x-wb1",
  147.     ".wb3": "application/x-wb3",
  148.     ".wiz": "application/msword",
  149.     ".wk4": "application/x-wk4",
  150.     ".wks": "application/x-wks",
  151.     ".wma": "audio/x-ms-wma",
  152.     ".wmf": "application/x-wmf",
  153.     ".wmv": "video/x-ms-wmv",
  154.     ".wmz": "application/x-ms-wmz",
  155.     ".wpd": "application/x-wpd",
  156.     ".wpl": "application/vnd.ms-wpl",
  157.     ".wr1": "application/x-wr1",
  158.     ".wrk": "application/x-wrk",
  159.     ".ws2": "application/x-ws",
  160.     ".wsdl": "text/xml",
  161.     ".xdp": "application/vnd.adobe.xdp",
  162.     ".xfd": "application/vnd.adobe.xfd",
  163.     ".xhtml": "text/html",
  164.     ".xls": "application/x-xls",
  165.     ".xml": "text/xml",
  166.     ".xq": "text/xml",
  167.     ".xquery": "text/xml",
  168.     ".xsl": "text/xml",
  169.     ".xwd": "application/x-xwd",
  170.     ".sis": "application/vnd.symbian.install",
  171.     ".x_t": "application/x-x_t",
  172.     ".apk": "application/vnd.android.package-archive",
  173.     "0.301": "application/x-301",
  174.     "0.906": "application/x-906",
  175.     ".a11": "application/x-a11",
  176.     ".ai": "application/postscript",
  177.     ".aifc": "audio/aiff",
  178.     ".anv": "application/x-anv",
  179.     ".asf": "video/x-ms-asf",
  180.     ".asx": "video/x-ms-asf",
  181.     ".avi": "video/avi",
  182.     ".biz": "text/xml",
  183.     ".bot": "application/x-bot",
  184.     ".c90": "application/x-c90",
  185.     ".cat": "application/vnd.ms-pki.seccat",
  186.     ".cdr": "application/x-cdr",
  187.     ".cer": "application/x-x509-ca-cert",
  188.     ".cgm": "application/x-cgm",
  189.     ".class": "java/*",
  190.     ".cmp": "application/x-cmp",
  191.     ".cot": "application/x-cot",
  192.     ".crt": "application/x-x509-ca-cert",
  193.     ".css": "text/css",
  194.     ".dbf": "application/x-dbf",
  195.     ".dbx": "application/x-dbx",
  196.     ".dcx": "application/x-dcx",
  197.     ".dgn": "application/x-dgn",
  198.     ".dll": "application/x-msdownload",
  199.     ".dot": "application/msword",
  200.     ".dtd": "text/xml",
  201.     ".dwf": "application/x-dwf",
  202.     ".dxb": "application/x-dxb",
  203.     ".edn": "application/vnd.adobe.edn",
  204.     ".eml": "message/rfc822",
  205.     ".epi": "application/x-epi",
  206.     ".eps": "application/postscript",
  207.     ".exe": "application/x-msdownload",
  208.     ".fdf": "application/vnd.fdf",
  209.     ".fo": "text/xml",
  210.     ".g4": "application/x-g4",
  211.     ".tif": "image/tiff",
  212.     ".gl2": "application/x-gl2",
  213.     ".hgl": "application/x-hgl",
  214.     ".hpg": "application/x-hpgl",
  215.     ".hqx": "application/mac-binhex40",
  216.     ".hta": "application/hta",
  217.     ".htm": "text/html",
  218.     ".htt": "text/webviewhtml",
  219.     ".icb": "application/x-icb",
  220.     ".ico": "application/x-ico",
  221.     ".ig4": "application/x-g4",
  222.     ".iii": "application/x-iphone",
  223.     ".ins": "application/x-internet-signup",
  224.     ".IVF": "video/x-ivf",
  225.     ".jfif": "image/jpeg",
  226.     ".jpe": "application/x-jpe",
  227.     ".jpg": "image/jpeg",
  228.     ".js": "application/x-javascript",
  229.     ".la1": "audio/x-liquid-file",
  230.     ".latex": "application/x-latex",
  231.     ".lbm": "application/x-lbm",
  232.     ".ls": "application/x-javascript",
  233.     ".m1v": "video/x-mpeg",
  234.     ".m3u": "audio/mpegurl",
  235.     ".mac": "application/x-mac",
  236.     ".math": "text/xml",
  237.     ".mdb": "application/x-mdb",
  238.     ".mht": "message/rfc822",
  239.     ".mi": "application/x-mi",
  240.     ".midi": "audio/mid",
  241.     ".mml": "text/xml",
  242.     ".mns": "audio/x-musicnet-stream",
  243.     ".movie": "video/x-sgi-movie",
  244.     ".mp2": "audio/mp2",
  245.     ".mp3": "audio/mp3",
  246.     ".mpa": "video/x-mpg",
  247.     ".mpe": "video/x-mpeg",
  248.     ".mpg": "video/mpg",
  249.     ".mpp": "application/vnd.ms-project",
  250.     ".mpt": "application/vnd.ms-project",
  251.     ".mpv2": "video/mpeg",
  252.     ".mpx": "application/vnd.ms-project",
  253.     ".mxp": "application/x-mmxp",
  254.     ".nrf": "application/x-nrf",
  255.     ".odc": "text/x-ms-odc",
  256.     ".p10": "application/pkcs10",
  257.     ".p7b": "application/x-pkcs7-certificates",
  258.     ".p7m": "application/pkcs7-mime",
  259.     ".p7s": "application/pkcs7-signature",
  260.     ".pci": "application/x-pci",
  261.     ".pcx": "application/x-pcx",
  262.     ".pdf": "application/pdf",
  263.     ".pfx": "application/x-pkcs12",
  264.     ".pic": "application/x-pic",
  265.     ".pl": "application/x-perl",
  266.     ".pls": "audio/scpls",
  267.     ".png": "image/png",
  268.     ".pot": "application/vnd.ms-powerpoint",
  269.     ".ppm": "application/x-ppm",
  270.     ".ppt": "application/vnd.ms-powerpoint",
  271.     ".pr": "application/x-pr",
  272.     ".prn": "application/x-prn",
  273.     ".ps": "application/x-ps",
  274.     ".ptn": "application/x-ptn",
  275.     ".r3t": "text/vnd.rn-realtext3d",
  276.     ".ram": "audio/x-pn-realaudio",
  277.     ".rat": "application/rat-file",
  278.     ".rec": "application/vnd.rn-recording",
  279.     ".rgb": "application/x-rgb",
  280.     ".rjt": "application/vnd.rn-realsystem-rjt",
  281.     ".rle": "application/x-rle",
  282.     ".rmf": "application/vnd.adobe.rmf",
  283.     ".rmj": "application/vnd.rn-realsystem-rmj",
  284.     ".rmp": "application/vnd.rn-rn_music_package",
  285.     ".rmvb": "application/vnd.rn-realmedia-vbr",
  286.     ".rnx": "application/vnd.rn-realplayer",
  287.     ".rpm": "audio/x-pn-realaudio-plugin",
  288.     ".rt": "text/vnd.rn-realtext",
  289.     ".rtf": "application/x-rtf",
  290.     ".sam": "application/x-sam",
  291.     ".sdp": "application/sdp",
  292.     ".sit": "application/x-stuffit",
  293.     ".sld": "application/x-sld",
  294.     ".smi": "application/smil",
  295.     ".smk": "application/x-smk",
  296.     ".sol": "text/plain",
  297.     ".spc": "application/x-pkcs7-certificates",
  298.     ".spp": "text/xml",
  299.     ".sst": "application/vnd.ms-pki.certstore",
  300.     ".stm": "text/html",
  301.     ".svg": "text/xml",
  302.     ".tdf": "application/x-tdf",
  303.     ".tga": "application/x-tga",
  304.     ".tif": "application/x-tif",
  305.     ".tld": "text/xml",
  306.     ".torrent": "application/x-bittorrent",
  307.     ".txt": "text/plain",
  308.     ".uls": "text/iuls",
  309.     ".vda": "application/x-vda",
  310.     ".vml": "text/xml",
  311.     ".vsd": "application/vnd.visio",
  312.     ".vss": "application/vnd.visio",
  313.     ".vst": "application/x-vst",
  314.     ".vsx": "application/vnd.visio",
  315.     ".vxml": "text/xml",
  316.     ".wax": "audio/x-ms-wax",
  317.     ".wb2": "application/x-wb2",
  318.     ".wbmp": "image/vnd.wap.wbmp",
  319.     ".wk3": "application/x-wk3",
  320.     ".wkq": "application/x-wkq",
  321.     ".wm": "video/x-ms-wm",
  322.     ".wmd": "application/x-ms-wmd",
  323.     ".wml": "text/vnd.wap.wml",
  324.     ".wmx": "video/x-ms-wmx",
  325.     ".wp6": "application/x-wp6",
  326.     ".wpg": "application/x-wpg",
  327.     ".wq1": "application/x-wq1",
  328.     ".wri": "application/x-wri",
  329.     ".ws": "application/x-ws",
  330.     ".wsc": "text/scriptlet",
  331.     ".wvx": "video/x-ms-wvx",
  332.     ".xdr": "text/xml",
  333.     ".xfdf": "application/vnd.adobe.xfdf",
  334.     ".xls": "application/vnd.ms-excel",
  335.     ".xlw": "application/x-xlw",
  336.     ".xpl": "audio/scpls",
  337.     ".xql": "text/xml",
  338.     ".xsd": "text/xml",
  339.     ".xslt": "text/xml",
  340.     ".x_b": "application/x-x_b",
  341.     ".sisx": "application/vnd.symbian.install",
  342.     ".ipa": "application/vnd.iphone",
  343.     ".xap": "application/x-silverlight-app",
  344.     ".zip": "application/x-zip-compressed",
  345.   }
  346.   export default mimeMap;

封装图片上传

upload.js

  1. import FormData from '../utils/formdata/index'
  2. import {
  3.     baseUrl
  4. } from '../config/env'
  5. import {
  6.     getToken,
  7.     removeToken
  8. } from "../utils/token";
  9. // 上传图片
  10. export function uploadFile(newUrl) { // newUrl是本地文件的 tmp 地址 
  11.     let formData = new FormData();
  12.     formData.appendFile("file", newUrl);
  13.     const data = formData.getData();
  14.     let _token = getToken();
  15.     let header = {};
  16.     if (_token == null) {
  17.         header["Authorization"] = `Basic ${Base64.encode(website.clientId + ":" + website.clientSecret)}`;
  18.     } else {
  19.         header["Authorization"] = `Bearer ` + _token;
  20.     }
  21.     return new Promise((resolve, reject) => {
  22.         wx.request({
  23.             url: baseUrl + '/api-bureau/f/upload',
  24.             method: 'POST',
  25.             header: {
  26.                 'content-type': data.contentType,
  27.                 ...header
  28.             },
  29.             data: data.buffer,
  30.             success(res) {
  31.                 if (res.statusCode == 401) {
  32.                     //如果返回未授权，执行删除本地token标志
  33.                     removeToken();
  34.                     wx.reLaunch({
  35.                         url: '/pages/login/login'
  36.                     });
  37.                 }
  38.                 if (res.statusCode == 200) {
  39.                     resolve(res.data);
  40.                 } else {
  41.                     reject('运行时错误,请稍后再试');
  42.                 }
  43.             }
  44.         });
  45.     })
  46. }

使用

wxml:

  1. <view class="weui-uploader">
  2.                 <view class='pics' wx:for="{{imgs}}" wx:for-item="item" wx:key="*this">
  3.                     <image class='weui-uploader__img' src="{{item}}" data-index="{{index}}" mode="aspectFill" bindtap="previewImg">
  4.                         <icon type='cancel' class="delete-btn" data-index="{{index}}" catchtap="deleteImg"></icon>
  5.                     </image>
  6.                 </view>
  7.                 <view class="tp_cont {{tj_ycang?'':'hide'}}" bindtap="chooseImg">
  8.                     <view class="tp_add">+</view>
  9.                 </view>
  10.             </view>

js： 

  1.     import {  uploadFile } from '../../request/upload'  //引入
  2.  
  3.     //data定义  
  4.     data:{
  5.         imgPics: [],
  6.         file: "",
  7.         imgs: [],
  8.     },
  9.      // 上传图片事件
  10.     chooseImg: function (e) {
  11.         var that = this;
  12.         var imgs = this.data.imgs;
  13.         if (imgs.length >= 9) {
  14.             this.setData({
  15.                 lenMore: 1
  16.             });
  17.             setTimeout(function () {
  18.                 that.setData({
  19.                     lenMore: 0
  20.                 });
  21.             }, 2500);
  22.             return false;
  23.         }
  24.         wx.chooseMedia({
  25.             // count: 1, // 默认9
  26.             sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  27.             sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  28.             success: function (res) {
  29.                 console.log(res)
  30.                 // 返回选定照片的本地文件路径列表，tempFilePath也可以作为img标签的src属性显示图片
  31.                 console.log(res.tempFiles[0])
  32.                 uploadFile(res.tempFiles[0].tempFilePath).then(res=>{
  33.                     that.setData({
  34.                         imgs: [res.data.url] //回显图片，将上传成功后接口返回的url地址赋给imgs用于展示
  35.                     });
  36.                 })
  37.                 // 下面是上传多张，需要多张的话就自己处理下
  38.                 // for (var i = 0; i < tempFilePaths.length; i++) {
  39.                 //     if (imgs.length >= 9) {
  40.                 //         that.setData({
  41.                 //             imgs: imgs
  42.                 //         });
  43.                 //         return false;
  44.                 //     } else {
  45.                 //         imgs.push(tempFilePaths[i]['tempFilePath']);
  46.                 //     }
  47.                 // }
  48.                 // console.log(imgs);
  49.             }
  50.         });
  51.     },
  52.     // 删除图片 
  53.     deleteImg: function (e) {
  54.         var imgs = this.data.imgs;
  55.         var index = e.currentTarget.dataset.index;
  56.         imgs.splice(index, 1);
  57.         this.setData({
  58.             imgs: imgs
  59.         });
  60.     },
  61.     // 预览现场图片 
  62.     previewImg: function (e) {
  63.         //获取当前图片的下标
  64.         var index = e.currentTarget.dataset.index;
  65.         //所有图片
  66.         var imgs = this.data.imgs;
  67.         wx.previewImage({
  68.             //当前显示图片
  69.             current: imgs[index],
  70.             //所有图片
  71.             urls: imgs
  72.         })
  73.     },

wxss:

  1. /* 上传图片样式 */
  2. .three {
  3.     margin-top: 27rpx;
  4. }
  5.  
  6. .weui-uploader {
  7.     margin-top: 16rpx;
  8. }
  9.  
  10. .tp_add {
  11.     width: 152rpx;
  12.     height: 152rpx;
  13.     border-radius: 10rpx;
  14.     opacity: 1;
  15.     border: 2rpx dashed #999999;
  16.     display: flex;
  17.     justify-content: center;
  18.     align-items: center;
  19.     font-size: 59rpx;
  20. }
  21.  
  22. .pics {
  23.     float: left;
  24.     position: relative;
  25.     margin-right: 15px;
  26. }
  27.  
  28. .pics image {
  29.     width: 152rpx;
  30.     height: 152rpx;
  31. }
  32.  
  33. .delete-btn {
  34.     width: 20rpx;
  35.     height: 20rpx;
  36.     position: absolute;
  37.     top: -15rpx;
  38.     right: -5rpx;
  39. }
  40.  
  41. .weui-uploader {
  42.     padding: 10rpx;
  43. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/586673
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号