elementui+七牛云上传图片

通过elementui文件上传+七牛云实现前端图片上传

1.准备步骤a:自己先去注册一个七牛云空间七牛云链接

在七牛云官网上可以查到以下三个条参数,
1、 空间名称
在这里插入图片描述
2、 在个人中心>密匙管理中找到SK (SecretKey)和 AK(AccessKey)
在这里插入图片描述

3、 储存空间的外链域名,在储存空间可以找到
在这里插入图片描述

2.当前端请求要上传图片到七牛云的时候,向前端发送一个上传凭证的token,这个token凭证由后台发,这里我们 用nodejs写后台。

*********这里我们先写后台

1.在src 目录里面创建一个server来当后端
2.然后在server目录下运行以下命令

npm init //这行作用是在server文件下创建后台的node_moudles
npm i express qiniu --save

3.在server目录下创建app.js

// 引入包
const express = require('express')
const bodyparse = require('body-parser')
// 创建服务
const app = express()
// 解析数据
app.use(bodyparse.json())
// 引入七牛云配置
const qnconfig = require('./config.js')
// 处理请求
app.get('/token', (req, res, next) => {
  // console.log(qnconfig.uploadToken)
  res.status(200).send(qnconfig.uploadToken)
})
// 监听3000端口
app.listen(3000, () => {
  console.log('this server are running on localhost:3000!')
})

4.在server目录下创建config.js以用来生成上传凭证

/*
七牛云配置
*/
const qiniu = require('qiniu')

// 创建上传凭证
const accessKey = '*********************' //这里填写七牛云的accessKey,我用*代替 
const secretKey = '*********************'//这里填写七牛云的secretKey,我用*代替 
const mac = new qiniu.auth.digest.Mac(accessKey, secretKey)
const options = {
  scope: 'foreveruploadimgs',//这里填写七牛云空间名称
  expires: 7200
}
const putPolicy = new qiniu.rs.PutPolicy(options)
const uploadToken = putPolicy.uploadToken(mac)

module.exports = {
  uploadToken
}

server目录下的结构
.
├── app.js
├── config.js
├── node_modules
└── package.json

5.在server目录下运行命令nodemon app.js

6.打开浏览器 localhost:3000,结果如下图:
在这里插入图片描述

3.前端代码通过使用elementUi实现图片上传

1.在项目根目录下运行命令

npm i element-ui axios -S

2.然后在main.js中引入elementui和axios

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from "axios"

Vue.use(ElementUI);
Vue.prototype.axios = axios

3.然后在views文件夹下面创建一个upload.vue

4.配置路由

import Vue from 'vue'
import Router from 'vue-router'
import UpLoad from '@/views/upload'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: UpLoad
    }
  ]
})

5.完整的目录结构
├── App.vue
├── views
│ └── upload.vue
├── main.js
├── router
│ └── index.js
└── server
├── app.js
├── config.js
├── node_modules
└── package.json

6.解决跨域问题(这里前端向后端访问属于跨域访问,前端是跑在8080端口的,后端是跑在3000端口的,所以首先要解决一下跨域问题)

在配置反向代理的文件下面写如下代码,我的是vue.config.js文件配置反向代理

module.exports = {
  lintOnSave: false,
  publicPath: './',
  devServer: {
    port: 8080,
    open: true,
    // 反向代理配置
    proxy: {
      '/up': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/up': '/'
        }
      }
    }
  }
}

7.在upload.vue文件中写

<template>
  <!-- upload -->
  <div class="upload">
    <el-upload
      class="avatar-uploader"
      :action= domain
      :http-request = upqiniu
      :show-file-list="false"
      :before-upload="beforeUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>
<script>
export default {
  data () {
    return {
      imageUrl: '',
      token: {},
      // 七牛云的上传地址,根据自己所在地区选择,我这里是华南区
      domain: 'https://upload-z2.qiniup.com',
      // 这是七牛云空间的外链默认域名
      qiniuaddr: '这里写七牛云的外链地址'
    }
  },
  methods: {
    // 上传文件到七牛云
    upqiniu (req) {
      console.log(req)
      const config = {
        headers: {'Content-Type': 'multipart/form-data'}
      }
      let filetype = ''
      if (req.file.type === 'image/png') {
        filetype = 'png'
      } else {
        filetype = 'jpg'
      }
      // 重命名要上传的文件
      const keyname = 'lytton' + new Date() + Math.floor(Math.random() * 100) + '.' + filetype
      // 从后端获取上传凭证token
      this.axios.get('/up/token').then(res => {
        console.log(res)
        const formdata = new FormData()
        formdata.append('file', req.file)
        formdata.append('token', res.data)
        formdata.append('key', keyname)
        // 获取到凭证之后再将文件上传到七牛云空间
        this.axios.post(this.domain, formdata, config).then(res => {
          this.imageUrl = 'http://' + this.qiniuaddr + '/' + res.data.key
        })
      })
    },
    // 验证文件合法性
    beforeUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>
<style scoped>
.upload {
  width: 600px;
  margin: 0 auto;
}
.avatar-uploader .el-upload {
  border: 5px dashed #ca1717 !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
现在就可以实现图片上传了
可以看到在七牛云上的空间管理>文件管理看见自己上传的图片了

在这里插入图片描述

  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 11
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值