一、封装七牛云
import * as qiniu from 'qiniu-js' import request from './request'; import path from 'path'; //获取七牛token,自己封装的请求后台的接口 export function getList(data) { return request.post('/pc/upload/get_qiniu_info', data) } const qiniuUpload = (file /**图片文件对象 */) => { return new Promise((resolve, reject) => { getList({ url: window.location.href }).then(data => { // console.log(data); let { token, domain } = data; // params = { token, domain } qiniuHandle(file, token).then(res => { // console.log(path.join(domain, res)); // resolve(path.join(domain, res)); resolve(`${domain}/${res}`) }); }) }); } const qiniuHandle = (file, token) => { return new Promise((resolve, reject) => { const options = { quality: 0.92, noCompressIfLarger: true } const key = null // 上传后文件资源名以设置的 key 为主,如果 key 为 null 或者 undefined,则文件资源名会以 hash 值作为资源名。 let config = { useCdnDomain: true, //表示是否使用 cdn 加速域名,为布尔值,true 表示使用,默认为 false。 region: qiniu.region.z0 // 根据具体提示修改上传地区,当为 null 或 undefined 时,自动分析上传域名区域 }; let putExtra = { fname: "", //文件原文件名 params: {}, //用来放置自定义变量 mimeType: null //用来限制上传文件类型,为 null 时表示不对文件类型限制;限制类型放到数组里: ["image/png", "image/jpeg", "image/gif"] }; qiniu.compressImage(file, options).then(data => { let observable = qiniu.upload(file, key, token, putExtra, config); observable.subscribe({ next: (res) => { // 主要用来展示进度 let total = res.total; // window.Qapp.showLoad({content:'上传图片中!'}) console.log("进度:" + parseInt(total.percent) + "% ") }, error: (err) => { // 失败报错信息 console.log(err) }, complete: (res) => { // 接收成功后返回的信息 // console.log(res.key) resolve(res.key); } }) }) }); } export default qiniuUpload;
二、使用upload组件上传
import React, { memo, useState } from 'react'; import { message, Upload, Modal } from 'antd'; import { PlusOutlined } from '@ant-design/icons'; import { withRouter } from 'react-router-dom' import { connect } from 'react-redux'; import qiniu from '../../util/qiniu' function getBase64(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => resolve(reader.result); reader.onerror = error => reject(error); }); } const EditDiseaseArticle = memo((props) => { const [fileList, set_fileList] = useState([]); //上传展示的图片列表 const [previewVisible, set_previewVisible] = useState(false) const [previewImage, set_previewImage] = useState(''); const [imageUrl, set_imageUrl] = useState(''); //要上传的图片 const handlePreview = async file => { if (!file.url && !file.preview) { file.preview = await getBase64(file.originFileObj); } set_previewImage(file.url || file.preview) set_previewVisible(true); }; //图片上传参数 let crolUrl = process.env.NODE_ENV === 'production' ? 'https://www.rorowoods.net/pc/upload/img' : '/api/pc/upload/img'; // let crolUrl = 'https://qiniup.com'; const imgUpdateprops = { name: 'img', action: crolUrl, listType: "picture-card", fileList, onPreview: handlePreview, customRequest(e) { // console.log(file) const imgItem = { uid: '1', // 注意,这个uid一定不能少,否则上传失败 name: 'hehe.png', status: 'uploading', url: '', percent: 99, // 注意不要写100。100表示上传完成 }; set_fileList([imgItem]) qiniu(e.file).then(res => { // console.log(res) const imgItem = { uid: '1', // 注意,这个uid一定不能少,否则上传失败 name: 'hehe.png', status: 'done', url: res, // url 是展示在页面上的绝对链接 }; set_fileList(() => { return [imgItem] }) set_imageUrl(res) }) }, onChange(info) { if (info.file.status == "uploading") { } if (info.file.status == 'removed') { set_imageUrl(''); set_fileList([]) } if (info.file.status === 'done') { } else if (info.file.status === 'error') { message.error(`${info.file.name} file upload failed.`); } }, }; const handleCancel = () => { set_previewVisible(false); } const uploadButton = ( <div> <PlusOutlined /> <div style={{ marginTop: 8 }}>规格:344×124</div> </div> ) return <div> <Upload {...imgUpdateprops}> {uploadButton} </Upload> <Modal visible={previewVisible} title="图片" footer={null} onCancel={handleCancel} > <img alt="example" style={{ '100%' }} src={previewImage} /> </Modal> </div > }); export default withRouter(connect()(EditDiseaseArticle));
这个例子是上传单张图的,可以根据自己的需求改造