vue+element ui上传图片到七牛云服务器

時間-

已于 2024-02-29 13:45:07 修改

阅读量1.9k

点赞数 18

分类专栏： vue springboot nodejs 文章标签： vue.js ui 服务器

于 2024-02-29 13:37:11 首次发布

本文链接：https://blog.youkuaiyun.com/qq_54027065/article/details/136365114

版权

文章讲述了作者尝试使用前端ElementUI组件实现资源上传到七牛云的demo，但由于获取token的复杂性，最终选择通过后端SpringBoot提供token。展示了前端上传组件、安装QiniuSDK、设置自定义上传方法以及后端SpringBoot控制器生成token的代码片段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本来打算做一个全部都是前端完成的资源上传到七牛云的demo，但是需要获取token，经历了九九八十一难，最终还是选择放弃，token从后端获取（springboot）。如果你们有前端直接能解决的麻烦记得私我哦！！！

效果展示

在这里插入图片描述

先看看文档：
element ui ：https://element.eleme.cn/#/zh-CN/component/upload
七牛云：https://developer.qiniu.com/kodo/1283/javascript

前端

首先安装七牛云的JS的sdk

npm install qiniu-js

此处域名是指向你自己的七牛云域名，目的是让照片回显。如何在七牛云中找到自己的域名请看下面。

3 .七牛云中找到自己的域名

<template>
    <div>
        <el-upload class="upload-demo" action="https://upload.qiniup.com" :on-remove="handleRemove" :file-list="fileList"
            list-type="picture" :http-request="customUpload" accept="image/jpeg,image/gif,image/png">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png/gif文件，且不超过2M</div>
        </el-upload>
    </div>
</template>

<script></

最低0.47元/天解锁文章