zoukankan      html  css  js  c++  java
  • 小程序之图片上传

    //调用相册等选择图片,得到图片的相对路劲
    up_img: function () { var that = this; wx.chooseImage({ count: 1, // 默认9 sizeType: ['compressed'], sourceType: ['album', 'camera'], success: function (res) { var tempFilePaths = res.tempFilePaths; upload(that, tempFilePaths); } }) }
    //把图片上传到服务器
    function
    upload(page, path) { wx.showToast({ icon: "loading", title: "正在上传" }), wx.uploadFile({ url: app.globalData.url + 'index.php?g=api&m=api&a=img_upload_api', filePath: path[0], name: 'file', formData: { openid: wx.getStorageSync('openid'), is_type: 1 }, success: function (res) { if (res.statusCode != 200) { wx.showModal({ title: '提示', content: '上传失败', showCancel: false }) return; } var res_data = JSON.parse(res.data); // poster_src = res_data.data; page.setData({ poster_src: res_data.data }); }, fail: function (e) { console.log(e); wx.showModal({ title: '提示', content: '上传失败', showCancel: false }) }, complete: function () { wx.hideToast(); //隐藏Toast } }); }

    以上是上传一张图片,下面是上传多张图片,需要注意的是filePath必须是字符串。

    //调用相册等选择图片,得到图片的相对路劲
        up_img: function () {
            var that = this;
            wx.chooseImage({
                count: 9, // 默认9
                sizeType: ['compressed'],
                sourceType: ['album', 'camera'],
                success: function (res) {
                    console.log(res.tempFilePaths);
                    var successUp = 0; //成功个数
                    var failUp = 0; //失败个数
                    var length = res.tempFilePaths.length; //总共个数
                    var i = 0; //第几个
                    that.upload(res.tempFilePaths, successUp, failUp, i, length);
                }
            })
        }
    //上传图片到服务器
    upload: function (filePaths, successUp, failUp, i, length) {
            var that = this;
            wx.uploadFile({
                url: app.globalData.url + 'index.php/api/Home/tpupload',
                filePath: filePaths[i],
                name: 'file',
                success: function (res) {
                    var res_data = JSON.parse(res.data);
    
                    if (res_data.status == 200) {
                        successUp++;
    
                        var arrimg = that.data.poster_src;
                        var now_upload_img = that.data.upload_img
    
                        arrimg.push(filePaths[i]);
                        now_upload_img.push(res_data.data);
                        // console.log("now_upload_img=" + now_upload_img);
                        // console.log("arrimg=" + arrimg);
                        that.setData({
                            poster_src: arrimg,
                            upload_img: now_upload_img
                        });
    
                    } else {
                        wx.showToast({
                            title: res_data.error,
                            icon: 'loading',
                            duration: 1000
                        })
                    }
    
                },
                fail: function (e) {
                    failUp++;
                    wx.showToast({
                        title: '请求失败',
                        icon: 'loading',
                        duration: 1000
                    })
                },
                complete: function () {
                    i++;
                    if (i == length) {
                        // page.showToast('总共' + successUp + '张上传成功,' + failUp + '张上传失败!');
                        wx.showToast({
                            title: '总共' + successUp + '张上传成功,' + failUp + '张上传失败!',
                            icon: 'loading',
                            duration: 1000
                        })
                    }
                    else {  //递归调用uploadDIY函数
                        that.upload(filePaths, successUp, failUp, i, length);
                    }
                }
            })
        }
     // 删除图片
        delimg: function (e) {
            var imgs = this.data.poster_src;
            var index = e.currentTarget.dataset.index;
            imgs.splice(index, 1);
            this.setData({
                poster_src: imgs
            });
        }

    前端页面展示图片的路劲是本地选择图片后得到的相对路劲,最后单击提交按钮上传所有东西时,图片这块要上传后台传来的图片地址,最后把所有图片上传给后台时数组形式出现问题之后是把所有图片拼接成字符串解决问题。

    var upload_img_str = null;
    
            for (var i = 0; i < that.data.upload_img.length; i++) {
    
                if (i == 0) {
    
                    upload_img_str = that.data.upload_img[i];
    
                } else {
    
                    upload_img_str += ',' + that.data.upload_img[i];
                }
    
            }
  • 相关阅读:
    Python环境搭建-anaconda
    UITableView的基本使用方法
    模拟网易新闻上方滚动条
    iOS之导航栏基本设置
    UITextField 方法和代理的使用
    UITextField详解
    init方法的重写与自定义
    OC中协议的理解protocal
    IOS中检测键盘出现和消失的消息
    怎么重装系统(一)
  • 原文地址:https://www.cnblogs.com/wanan-01/p/9057480.html
Copyright © 2011-2022 走看看