Vue上传图像到阿里云OSS对象存储

最新推荐文章于 2024-06-20 19:31:07 发布

原创

最新推荐文章于 2024-06-20 19:31:07 发布 · 473 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #阿里云 #javascript

总结前台和后台上传图片到阿里云OSS。

前台

在根目录中写一个request的js文件，封装请的地址

import axios from "axios";
const service = axios.create({
   
   
  baseURL: 'http://localhost:8083/',
  timeout: 10000
})
// 把service导出
export default service

在src下的api中写一个请求的js 如写一个uploadphoto.js：

import request from '../utils/request'

const group_name = 'photo'

let data = {
   
   
    setphoto(params){
   
   
        return new request({
   
   
            url:`${
   
   group_name}/setphoto`,
            data:params,
            method:'post',
        })
    }
}
export default data

再写一个组件，用于测试图片上传。
formData 可以把文件写成二进制，并且封装起来，传送给后台。

<template>
  <div>
    <br /><br /><br /><br /><br />
    <el-upload
      class="avatar-uploader"
      action="#"
      :http-request="setphoto"
      :auto-upload="true"
      :show-file-list=