• 当前标签:上传图片

程序开发 小程序多图上传并返回操作

之前有写过小程序上传图片的,大多数都是前端处理,这篇是关于上传到服务器接收返回数据操作的,这里使用迭代器防止数据返回异步。 小程序上传图片及预览图片 小程序选择、预览、删除、上传图片 js: /**   * 上传图片   */  upImg: function (e) {      let that = this      wx.chooseImage({          success: function (res) {              // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片              let tempFilePaths = res.tempFilePaths              // console.log(tempFilePaths)              let imgs = that.data.imgs  // 这个是储存图片地址,用于显示图片              let image = that.data.image  // 这个是获取图片名称或者id等后端发送请求需要的数据              that.uploadImage(0, tempFilePaths)          }      })  },  /**   * 图片上传接口   */  uploadImage: function (i,filePath){      if (i == filePath.length){          return      }      let that = this      let imgs = that.data.imgs      let image = that.data.image      wx.uploadFile({          url: app.globalData.api + '/Uploads/uploader', //仅为示例,非真实的接口地址          filePath: filePath[i],          name: 'file',          success: function (res) {              let img = JSON.parse(res.data)              console.log(img)              if (img.code == 200) {                  imgs.push(img.data.url_file_name)                  image.push(img.data.file_name)                  that.setData({                      imgs,                      image                  })                  console.log(that.data.imgs)                  console.log(that.data.image)                  i++                  that.uploadImage(i, filePath)              }              //do something          }      })  },  

2018-07-06 10:59:18 192 4 0
阅读详情

程序开发 Vue input上传图片

Vue使用input上传图片,没有提交按钮,用于修改头像。代码参考互联网: <input @change="upAvatar" name="files" accept="image/*" type="file">  // 上传头像 upAvatar: function(e) {   let that = this;   let file = e.target.files[0];   let param = new FormData(); //创建form对象   param.append('files',file,file.name);//通过append向form对象添加数据   // param.append('chunk','0');//添加form表单中其他数据   let config = {     headers:{'Content-Type':'multipart/form-data'}   };  //添加请求头   axios.post(that.$root.urlPath.MJK + '/members/uploadImage?memberid='+ localStorage.getItem('memberid'),param,config)     .then(response=>{       console.log(response.data);     }) },

2018-06-08 18:44:54 78 0 0
阅读详情

程序开发 JavaScript通过 new FileReader() 获取图片base64 无组件上传图片

jQuery无组件上传图片 首先得有个form (可以不用form),再来个input: <form id="upImg">     <label for="addImg">         <i class="iconfont icon-add"></i>         <input type="file" name="pic" id="addImg" accept="image/*" src="submit.gif" alt="Submit" />     </label> </form> 再来看看 js: // 上传图片 $('#upImg').change(function (e) {     let file = e.target.files[0]; // 获取图片信息 可以从中获取图片大小     console.log(file)     let reader = new FileReader();     reader.readAsDataURL(file); // 读出 base64     reader.onloadend = function() {         // 图片的 base64 格式, 可以直接当成 img 的 src 属性值         let dataURL = reader.result; // dataURL 为图片 base64 码         // 下面逻辑处理     }; })  

2018-05-15 14:24:37 86 0 0
阅读详情

程序开发 小程序选择、预览、删除、上传图片

上次写了篇上传图片的文章:小程序上传图片及预览图片 ,还缺少一点功能,今天做了另一种删除删除样式,加上上传图片到服务器功能; wxml <!-- 图片上传模块 --> <view class='upImage' wx:if="{{isImage}}">   <view class='upImage-list'>     <view class='image-li' bindtap='chooseImage'>       <view class='iconfont icon-xiangji'></view>     </view>     <view class='image-li' wx:for="{{imgs}}" wx:key="imgs">       <image bindtap='previewImage' data-index='{{index}}' mode='aspectFill' src='{{item}}'></image>       <text bindtap='delImage' data-index='{{index}}'>删除</text>     </view>   </view>   <button bindtap='uploadImage'>上传图片</button> </view> wxss /* 上传图片 */ .upImage {   padding: 10px;   margin-top: 10px; } .upImage-list {   display: flex;   flex-wrap: wrap; } .image-li {   margin-right: 10px;   margin-bottom: 10px;   width: calc((100vw - 50px) / 4);   height: calc((100vw - 50px) / 4);   border: 1px solid #fff;   border-radius: 10px;   overflow: hidden;   position: relative; } .image-li:first-child {   display: flex;   align-items: center;   justify-content: center;   color: #eee; } .image-li:first-child view {   font-size: 100rpx; } .image-li:nth-child(4n) {   margin-right: 0; } .image-li image {   width: 100%;   height: 100%; } .image-li text {   position: absolute;   text-align: center;   bottombottom: 0;   left: 0;   width: 100%;   font-size: 24rpx;   background: rgba(0, 0, 0, 0.5);   color: #fff; } .upImage button{   background: rgba(0, 0, 0, 0);   color: #fff;   border: 1px solid #fff; } JS data:{     imgs: [] , // 图片临时储存 }, /**    * 选择图片点击    */   chooseImage:function(){     let that = this;     wx.chooseImage({       // count: 1, // 默认9       sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有       sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有       success: function (res) {         // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片         var tempFilePaths = res.tempFilePaths         let imgs = that.data.imgs;         for(let i =0; i < tempFilePaths.length; i++){           imgs.push(tempFilePaths[i])         }         that.setData({           imgs: imgs         })       }     })   },   /**    * 预览图片    */   previewImage:function(e){     let _index = e.currentTarget.dataset.index;     let list = this.data.imgs;     let current = list[_index];     wx.previewImage({       current: current, // 当前显示图片的http链接       urls: list // 需要预览的图片http链接列表     })   },   /**    * 删除图片    */   delImage:function(e){     let _index = e.currentTarget.dataset.index;     let previewImage = this.data.imgs;     console.log(previewImage)     previewImage.splice(_index, 1);     this.setData({       imgs: previewImage     })   },   /**    * 上传图片    */   uploadImage:function(e){     let imgs = this.data.imgs;     for (let i = 0; i < imgs.length; i++){     wx.uploadFile({       url: 'https://example.weixin.qq.com/upload', //仅为示例,非真实的接口地址       filePath: imgs[i],       name: 'file',       formData: {         'user': 'test'       },       success: function (res) {         var data = res.data         //do something       }     })     }   },

2018-03-16 11:10:06 288 6 0
阅读详情

程序开发 小程序上传图片及预览图片

wxml代码: <!-- 图片 -->     <view class='upImgTips' wx:if="{{previewImage != ''}}">点击预览图片,长按删除图片</view>     <view class='img'>       <view class='img_li' bindtap='upload_img'>         <text class='iconfont icon-zhaoxiangji'></text>       </view>       <view class='img_li' wx:for="{{previewImage}}" wx:key="{{index}}">         <image bindtap='previewImage' bindlongpress='delImage' data-index="{{index}}" data-src='{{item}}' src='{{item}}' mode='widthFix'></image>       </view>     </view>   wxss代码: .img {   width: 100%;   display: flex;   flex-wrap: wrap; } .img_li {   width: calc((100vw - 50px) / 4);   height: calc((100vw - 50px) / 4);   border: 1px dashed #4da585;   margin-right: 10px;   margin-bottom: 10px;   text-align: center;   line-height: calc((100vw - 50px) / 4);   border-radius: 5px;   overflow: hidden; } .img_li:nth-child(4n) {   margin-right: 0; } .img_li image {   width: 100%; } .recorder {   margin: 10px 0; } .upImgTips {   font-size: 25rpx;   margin-bottom: 10px; }   js代码: data: {    previewImage:[], // 预览图片地址  },  // 上传图片  upload_img:function(){    let that = this;    wx.chooseImage({      // count: 1, //最多可以选择的图片张数,默认9      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有      success: function (res) {        // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片        var tempFilePaths = res.tempFilePaths        let previewImage = that.data.previewImage;        // console.log(res)        for (let i = 0; i < res.tempFilePaths.length;i++){            previewImage.push(tempFilePaths[i]);        }        // console.log(previewImage)        that.setData({          previewImage: previewImage        })      }    })  },  // 预览图片  previewImage:function(e){    wx.previewImage({      current: '', // 当前显示图片的http链接      urls: [e.currentTarget.dataset.src] // 需要预览的图片http链接列表    })  },  // 长按删除图片  delImage:function(e){    // console.log(e.currentTarget.dataset.index)    let _index = e.currentTarget.dataset.index;    let previewImage = this.data.previewImage;    console.log(previewImage)    previewImage.splice(_index,1);    this.setData({      previewImage: previewImage    })  },

2018-02-13 22:05:16 91 0 0
阅读详情
  • 1
前往