微信小程序上传图片

话不多说,直接上码。

<view class="section">
  <!--放一张图片或按钮  点击时去选择图片-->
  <image class=‘ph‘ src=‘{{photos}}‘ bindtap=‘touchphoto‘ mode=‘aspectFit‘>  </image>
  <!--循环显示选中的图片-->
  <block wx:for="{{pics}}" wx:for-index="index">
  <view class="item" data-index="{{index}}" >
   <image class=‘ph‘ src=‘{{item}}‘ bindtap=‘touchphoto‘ mode=‘aspectFit‘>  </image>
  </view>
    </block>
</view>
<button bindtap=‘sendFile‘>上传</button>

js

// 在需要使用的js文件中,导入js
var util = require(‘../../../utils/util.js‘);
var app = getApp();

Page({
  data: {
    pics:[],//存放选中图片数组
    photos: "../../../img/camera.jpg",//默认点击图片
    fileNames:""//
  },
 touchphoto: function (e) {//点击选择图片事件
    var that = this
    var pic = this.data.pics;
      wx.chooseImage({
        count: 9 - pic.length, //图片数量 默认9
        sizeType: [‘original‘, ‘compressed‘], // 可以指定是原图还是压缩图,默认二者都有
        sourceType: [‘album‘, ‘camera‘], // 可以指定来源是相册还是相机,默认二者都有
        success: function (res) {
          // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
          var tempFilePaths = res.tempFilePaths;
          pic = pic.concat(tempFilePaths);
          that.setData({
            pics:pic,        //如果上传单张图片的话可以取消这个       photos:tempFilePaths   //如果上传单张图片的话,可以用这个
          })
        }
      })
  },
 sendFile: function (e) {//多图片上传
    var paths = this.data.pics;//获取上传数组
    for (var index in paths){//循环这个数组
      var fileP = "";
      fileP = fileP + paths[index];//获取当前循环到的图片
      wx.uploadFile({
        url: app.globalData.API_URL + ‘/uploadFileWX‘,
        filePath: fileP,
        name: ‘file‘,//名称根据自己情况取
        formData: {//除了要上传的附件外。其他额外要传的参数
          ‘user‘: ‘admin‘
        },
        success: function (res) {//上传成功方法
          wx.showToast({
            title: ‘上传成功‘,
            icon: ‘success‘,
            duration: 2000
          })
        }
      })
    }
  },
  onLoad: function () {

  }
})

css样式

.ph{
  width: 200rpx;
  height: 200rpx;
  border: 1px solid #909090;
  margin-left:14%;
  border-radius: 20rpx;
}
.ph1{
  width: 200rpx;
  height: 200rpx;
  border: 1px solid #909090;
  margin-left:5%;
  float: left;
  border-radius: 20rpx;
  margin-top: 5%;
  margin-bottom: 5%;
}

.btn{
    background: #335c8f;
    color: #fff;
    margin-left:40rpx;
    margin-right: 40rpx;
    width: 90%;
}

java后台代码

  @RequestMapping(value = "/uploadFile", method = RequestMethod.POST)
    public @ResponseBody  Object uploadFile(HttpServletRequest request, HttpServletResponse response,
            @RequestParam(value = "file", required = false) MultipartFile file,
            @RequestParam(value = "user") String user,Model model) {
        try {
            request.setCharacterEncoding("UTF-8");
         
            if (!file.isEmpty()) {
                 System.out.println("成功获取照片");
                String fileName = file.getOriginalFilename();
                String path = null;
                String type = null;
                type = fileName.indexOf(".") != -1 ? fileName.substring(fileName.lastIndexOf(".") + 1,
                        fileName.length()) : null;
                if (type != null) {//类型验证,如果不需要验证的话,也可以取消这一步
                    if ("GIF".equals(type.toUpperCase()) || "PNG".equals(type.toUpperCase())
                            || "JPG".equals(type.toUpperCase())) {
                        // 项目在容器中实际发布运行的根路径
                        String realPath = request.getSession().getServletContext().getRealPath("/");
                        // 自定义的文件名称
                        String trueFileName = String.valueOf(System.currentTimeMillis()) + fileName;
                        // 设置存放图片文件的路径
                        path = realPath + "/resources/wxFile/" + trueFileName;
                        file.transferTo(new File(path));

                        model.addAttribute("resultCode", "200");
                    } else {
                         System.out.println("不是我们想要的文件类型,请按要求重新上传");
                        model.addAttribute("resultCode", "300");

                    }
                } else {
                     System.out.println("文件类型为空");
                    model.addAttribute("resultCode", "300");

                }
            } else {
                 System.out.println("没有找到相对应的文件");
                model.addAttribute("resultCode", "erro");
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
        return model;
    }

看完是不是觉得特别简单?

原文地址:https://www.cnblogs.com/wushumin/p/10039700.html

时间: 2024-10-10 22:54:54

微信小程序上传图片的相关文章

微信小程序上传图片到COS腾讯云

功能需求:用户可以在评论中上传图片,图片保存到腾讯云COS上. 实现方法,微信小程序需要往后台传一个代表文件的参数file代表文件,借助MultipartFile获得文件的路径和文件名等信息. 关键实现代码: @RequestMapping(value = "/plugins/fileServer/fileservice/sales/admin", method = RequestMethod.POST) void postAdmin(@RequestParam(value = &qu

微信小程序上传图片到服务器实例

这一篇主要说头像 上传,以及修改保存的功能.本章节主要用的知识点有 1. wx.chooseImage 从本地相册选择图片或使用相机拍照. 2.wx.uploadFile 将本地资源上传到服务器. 3. 修改原来的小程序头像并保存,调用后台接口修改操作  第一步:我们要获取本地图片,官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/media-picture.html#wxchooseimageobject 我这里也贴出来了,不够

微信小程序上传图片(前端+PHP后端)

一.wxml文件 <text>上传图片</text> <view> <button bindtap="uploadimg">点击选择上传图</button> </view> <image src='{{source}}' style='width:600rpx; height:600rpx' /> 二.js文件 Page({ /** * 页面的初始数据 */ data: { //初始化为空 source

微信小程序上传图片单张

wxml代码 <view> <image src='{{source}}' bindtap="uploadimg" style='width:200rpx;height:200rpx;background:red;'>点击选择上传图</image> </view> js代码 var app = getApp() Page({ /** * 页面的初始数据 */ data: { //初始化为空 source: '' }, /** * 上传图片

微信小程序 - 上传图片组件

使用了ES8的async/await,注意正确导入“regenerate.js”的路径,使用说明在components/up-img/index.js 点击下载:图片上传组件 原文地址:https://www.cnblogs.com/cisum/p/10199507.html

微信小程序 上传图片

效果图  如上,js  如下,在页面循环图片就可以 /** * 选择图片 */ uploadImgAdd: function(e) { var imgs = this.data.imgs; wx.chooseImage({ sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: (res) => { for (let j in res.tempFilePaths){ if (res.tempF

微信小程序--图片相关问题合辑

图片上传相关文章 微信小程序多张图片上传功能 微信小程序开发(二)图片上传 微信小程序上传一或多张图片 微信小程序实现选择图片九宫格带预览 ETL:微信小程序之图片上传 微信小程序wx.previewImage预览图片 微信小程序之预览图片 小程序开发:上传图片到腾讯云 .NET开发微信小程序-上传图片到服务器 微信小程序本地图片处理--按屏幕尺寸插入图片 [微信小程序]上传图片到阿里云OSS Python Flask小程序文件(图片)上传技巧 小程序图片上传阿里OSS使用方法 微信小程序问题汇

微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决

微信小程序上传图片的时候,如果是多图片上传,一般都是直接用一个循环进行wx.uploadFile 这个在电脑上面测试与苹果手机上面都不会有什么问题 但当用安卓测试的时候,你会发现小程序会提示一个the same task is working wx.uploadFile不能并行,因为wx.uploadFile是一个异步函数,所以循环的时候在安卓手机上会出现并行 解决的方法 做一个上传完的标识,然后 用递归算法进行上传 在上传成功的回调函数里面,直接递归,标识满足直接跳出,完成所有图片上传 贴上个

微信小程序多张图片上传

微信小程序上传图片每次只能上传一张,所有很多朋友就会问想要多张图片上传怎么办? 首先,我们来看一看wx.chooseImage(object)和wx.uploadFile(OBJECT)这两个个api 示例代码是这样的: wx.chooseImage({ success: function(res) { var tempFilePaths = res.tempFilePaths wx.uploadFile({ url: 'http://example.weixin.qq.com/upload',