###聊聊七牛上傳資源那些具體的案例（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