React使用antd-mobile的ImagePicker实现图片上传

记录一下在项目开发中，利用ImagePicker组件和axios实现图片上传。

antd-mobile 以及 axios 的安装不再赘述。

一、引入antd-moblie中的 imagepicker。

    constructor(props) {
        super(props);
        this.state = {
            files: [],
            uploadpath: 'pic'   //上传路径文件夹名  根据自己实际情况来
        };
    }

    onChange = (files) => {
          console.log(files);
          this.setState({
              files,
        });
    }

render中

  <ImagePicker
           files={this.state.files}
           onChange={this.onChange}
           selectable={this.state.files.length < 3}  // 设置最大可上传图片数量为3 根据自己需求调整。
           multiple={false}
  />

二、上传图片

 upload = () => {
        for (let i = 0; i < this.state.files.length; i++) {
            let formData = new FormData();
            let file = this.state.files[i].file;
            formData.append('images', file);
            formData.append('path', _self.state.uploadpath)   // 这里根据自己项目后台实际情况定
            var url = '***这里改写为你的上传图片的接口地址***';
            axios.post(url, formData, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }).then((json) => {
              console.log(json); 
            }).catch();
        }
    }

 render() {
        return ( 
            ...
            <Button onClick={this.upload}>上报</Button>
            ...
   );
 }

三、处理服务端的返回

返回有很多种处理方式 根据自己实际需求进行调整。

方式1.拼成数组，一次性上报全部图片

upload中
  var _self = this;
  var piclist=[];
 循环中{
     axios.post(url, formData, {headers: { 'Content-Type': 'multipart/form-data'}
        }).then((json) => {
           var picname =  json.data.result.filename ;       // 获取返回图片名
           var picpath = _self.state.uploadpath + '/' +picname ;    // 拼装获取图片路径 
           piclist.push({picname:json.data.result.filename,picpath:picpath });      //拼装成数组          
           //自己做标记 判断循环完成 完成后对piclist处理上传
           ...       
     }).catch();
    }

方式2.获取后直接对单张图片路径进行单独的上报

upload中
  var _self = this;
 循环中{
     axios.post(url, formData, { headers: {  'Content-Type': 'multipart/form-data' }
         }).then((json) => {
             var picpath = _self.state.uploadpath + '/' + json.data.result.filename;
             this.dosecondupload(picpath);   //图片上传完成返回拼装图片路径,二次上传直接调用服务器中的图片地址     
     }).catch();
    }

    dosecondupload = (picpath) => {
        var url = '***这里改写为你的接口地址2***';
        let params = new URLSearchParams();
        params.append('id', this.state.id);   // 其他的上报参数
        params.append('path', picpath);       // 单张的图片路径
        axios.post(url, params).then((json) => {
            console.log(json);
        }).catch();
    }

最后是处理方式2的基础样例，仅供参考。

import React, { Component } from "react";
import { NavBar, ImagePicker, Button } from 'antd-mobile';
import axios from 'axios';

class PicUploadDemo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            files: [],
            uploadpath: 'pic'，
            id:'1' 
        };
    }

    componentDidMount() {
        //初始化
    }

    onChange = (files) => {
        console.log(files);
        this.setState({
            files,
        });
    }

    upload = () => {
        var _self = this;
        for (let i = 0; i < this.state.files.length; i++) {
            let formData = new FormData();
            let file = this.state.files[i].file;
            formData.append('images', file);
            formData.append('path', _self.state.uploadpath)   
            var url = '***这里改写为你的接口地址***';
            axios.post(url, formData, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }).then((json) => {
                var picpath = _self.state.uploadpath + '/' + json.data.result.filename;
                this.dosecondupload(picpath);   
            }).catch();
        }
    }

    dosecondupload= (picpath) => {
        var url = '***这里改写为你的接口地址2***';
        let params = new URLSearchParams();
        params.append('id', this.state.id);
        params.append('path', picpath);
        axios.post(url, params).then((json) => {
            console.log(json);
        }).catch();
    }

    render() {
        return (
            <div className="fullscreen">
                <NavBar
                    mode="dark"
                >图片上传样例</NavBar>
                <div>
                    <ImagePicker
                        files={this.state.files}
                        onChange={this.onChange}
                        selectable={this.state.files.length < 3}
                        multiple={false}
                    />
                </div>
                <Button onClick={this.upload}>上报</Button>
            </div>
        );
    }
}

export default PicUploadDemo;

后台代码等有空的时候整理一下再放出来。
8.19后台代码更新。

 @PostMapping("/enforce/uploadAtta")
    public ServiceResult<JSONObject> uploadAtta(@RequestParam("images") MultipartFile file, @RequestParam String path) {
        String url = "**************接口地址**************"+ path;
        JSONObject proj = new JSONObject();
        try {
            if (file.isEmpty()) {
                throw new Exception("无附件");
            }
            // 创建临时文件目录
            File fileTempPath = new File(enforceTempPath);
            if (!fileTempPath.exists() && !fileTempPath.isDirectory()) {
                fileTempPath.mkdirs();
            }

            // 文件保存路径
            String filePath = enforceTempPath + getRandom(4) + file.getOriginalFilename();    
            boolean b_local = false;
            try {
                // 转存文件
                file.transferTo(new File(filePath));
                b_local = true;
            } catch (Exception e) {
                e.printStackTrace();
            }
            if (b_local) {
                Map<String, FileItem> files = new HashMap<>();
                FileItem fileItem = new FileItem(filePath);
                files.put("images", fileItem);
                Map<String, String> params_file = new HashMap<>();
                String jsonFiles = HttpUtilEx.doPostFile(url, params_file, files, null, "UTF-8");
                JSONObject o_files = JSONObject.parseObject(jsonFiles);
                // 删除本地临时文件
                deleteFile(filePath);
                if (null != o_files && o_files.containsKey("result") && o_files.getString("result").equals("success")) {
                    proj.put("orgname", file.getOriginalFilename());
                    proj.put("filename", o_files.getString("filename"));
                } else {
                    throw new Exception("上传附件失败");
                }
            }
        } catch (Exception e) {
            return ServiceResult.failure("4000", e.getMessage());
        }
        return ServiceResult.success(proj);
    }

删除临时文件：

 private boolean deleteFile(String sPath) {
        boolean flag = false;
        File file = new File(sPath);
        if (file.isFile() && file.exists()) {
            file.delete();
            flag = true;
        }
        return flag;
    }