###聊聊七牛上传资源那些具体的案例（react，小程序，jquery）。。。，代码直接复制可用~~...

 step1:我司项目中，上传资源到七牛，需要先从服务器拿到token,key(上传文件的名字,会处理带时间戳，或其他形式)，baseURI(上传图片的域名)，根据项目而定，token最好从后端拿，其他参数前端可以写死或者前端处理，为了项目可配置化，我司采取的是从后端取

step2:将资源传到七牛，携带参数token,key

step3:成功后显示，资源地址为 baseURI+ '/'+key

react上传

主要上传组件 rc-upload(antd upload组件也基于rc-upload,如果项目中使用antd 直接引入upload，无需单独装rc-upload)

吐槽阅读注意点

1.我代码里尝试 Upload里的fileList往redux放，不会影响试图，我又尝试单独定义个变量，默认fileList，有数据，也不会影响试图。好像只有state里的会影响试图，也许是我代码有毒 

 2.关于beforeUpload注意点，我需要在beforeUpload异步处理请求，且执行顺序要在data之前。需要返回promise.坑点是即使你返回promise ，再代码中不能有任何return 语句。比如执行个函数，默认return undefined,之前笔者代码axios是全局封装拦截处理。然后再数据中心统一请求数据，return 出数据给具体业务使用，但反复测试不行。执行顺序data在前，达不到效果。最终处理结果如下代码 

 3.关于代码注释掉部分，是设置Upload默认值。(需求是新增或者编辑图片，如果是编辑则需要显示) 

	import React from 'react'
	import { Upload, Icon } from 'antd';
	<!-- import {connect} from 'react-redux' -->
	<!-- import { currentPicAction} from "src/redux/common"; -->

	let uploadInfo = {
	        token :'',
	        key : '',
	        baseURI : ''
	    }

<!-- 	@connect(
	  state => ({currentPic:state.currentPic}),
	  { currentPicAction }
	) -->

	class UploadTest extends React.Component{
	  constructor(props){
	    super(props)
	    this.state = {
	      "fileList": []
	    }
	  }
<!-- 	  componentWillReceiveProps = (props) =>{
	    let url = props.currentPic.imgUrl
	    if(url){
	      this.setState({
	        fileList:[{
	          url:url,
	          uid:-1
	        }]
	      })
	    }
	  } -->
	  render(){
	    const { fileList } = this.state
	    const uploadButton = (
	      <div>
	        <Icon type="plus" />
	      </div>
	    );
	    const props = {
	      action: 'http://up.qiniu.com/',
	      onRemove: (file) => {
	        this.setState(({ fileList }) => {
	          const index = fileList.indexOf(file);
	          const newFileList = fileList.slice();
	          newFileList.splice(index, 1);
	          return {
	            fileList: newFileList,
	          };
	        });
<!-- 	        this.props.currentPicAction({
	          ...this.props.currentPic,
	          imgUrl:''
	        }) -->
	      },
	      fileList: this.state.fileList,
	      data:(file)=>{
	        return {
	          "token" : uploadInfo.token,
	          "key" : uploadInfo.key
	        }
	      },
	      multiple: true,
	      beforeUpload(file) {
	        let fileName = file.name;
	        return new Promise((resolve) => {
	          axios.get('../获取token', {params:{
	            "fileName":fileName,
	          }})
	          .then(function (response) {
	            if(response.data.token){
	              let value = response.data;
	              uploadInfo = {
	                token :value.token,
	                key : value.key,
	                baseURI : value.baseURI
	              }
	            }
	            resolve(file);
	          })
	          .catch(function (error) {
	            console.log(error);
	          });
	        });
	      },
	      onSuccess:(file)=> {
	        let url = uploadInfo.baseUrl+uploadInfo.fileKey;
<!-- 	        this.props.currentPicAction({
	          ...this.props.currentPic,
	          imgUrl:url
	        }) -->
	        this.setState({ fileList :[{
	          url:url,
	          uid: -1
	        }]})
	      },
	      listType:"picture-card",
	      key:Math.random()
	    }
	    return (
	      <div>
	        <Upload
	          {...props}
	        >
	          {fileList.length >= 1 ? null : uploadButton}
	        </Upload>
	      </div>
	    )
	  }
	}

	export default UploadTest
复制代码

好吧，我累了，其他关于小程序和jq的详见github,其他相对坑少，基本照api写就好，详见github