vue+Element项目，上传图片至七牛云空间+node.js后端配置上传图片的接口

置顶

文文同学

于 2019-06-14 11:25:51 发布

阅读量1.2k

点赞数 1

分类专栏：前端后端文章标签： vue Element node.js express

本文链接：https://blog.csdn.net/qq_42360843/article/details/91958842

版权

本文介绍了如何在Vue+Element前端项目中，结合Node.js后端，配置并实现上传图片到七牛云存储服务。在Node.js的photo.js文件中设置接口，使用Express框架，并在Vue项目中创建上传页面，通过指定的七牛云区域进行客户端上传。

摘要由CSDN通过智能技术生成

一、首先，配置好上传图片的接口：
在后端项目 node.js 中的 photo.js(自己定义)中，引入请求的包，如下图所示：
在这里插入图片描述
接口配置如下：
接口配置完毕，我们再打开，vue 后台项目，新增页面：
上传图片 html 代码如下：

 <el-form-item label="缩略图" prop="image">
          <el-upload
            class="avatar-uploader"
            :data="qiniuForm"
            :before-upload="beforeUpload"
            :on-success="uploadSuccess"
            :limit="1"
            :on-exceed="handleExceed"
            :on-remove="handleRemove"
            action="https://upload.qiniup.com"
          >
            <img v-if="newForm.ima