使用element-ui的upload组件实现上传图片至七牛

upload-file

使用element-ui的upload组件实现上传图片至七牛云

工程要求 vue2.4 + express4.14 + es6 node版本在4.0以上(建议使用 nvm 来管理node版本) 代码风格检查 standardjs 工程依赖 qiniu element-ui 安装依赖

npm install 启动工程 工程端口 8080 融合模式启动

npm start 注: 此模式下启动即可上传文件 nodemon模式启动

npm run nodemon 流程 后端配置公钥、私钥和存储空间名 后端构建上传上传策略用以生成uploadToken 后端暴露api返回uploadToken 前端上传文件前先调用后端api获取uploadToken 前端成功上传图片,获取七牛返回的图片地址 七牛 直传文件 上传凭证 Node.js SDK 后端

code

注:启动项目前先将accessKey、secretKey、bucketName等参数替换成七牛为您提供的对应参数

接口请求方式

# request url curl --request GET \ --url 'http://localhost:8080/api/upload?fileName=123.png' # body { "code": "1", "desc": "ok", "result": { "bucketName": "bucket-name", "fileName": "f90bad3c937d1dcdfc37.png", "uploadToken": "JjO_ih1JuNJAKDT-cr5T10TSuBGyJf1" } } 前端 code

注:具体文档��参考element-ui upload�

版权声明:

1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。
2、网站不提供资料下载,如需下载请到原作者页面进行下载。