<p id="g32nn"></p>
    1. <acronym id="g32nn"><strong id="g32nn"></strong></acronym>
      <pre id="g32nn"></pre>

      <table id="g32nn"><option id="g32nn"></option></table>
          當前位置:首頁 > IT技術 > Web編程 > 正文

          Vue Bootstrap OSS 實現文件上傳
          2022-09-06 22:56:22


          Vue Bootstrap OSS 實現文件上傳_vue.js


          Vue Bootstrap OSS 實現文件上傳_文件上傳_02

          Vue Bootstrap OSS 實現文件上傳_文件上傳_03

          公司實現文件上傳技術選型采用后端SpringBoot/Cloud,前端vue Bootstrap ,阿里云OSS作為文件存儲,文件上傳功能單獨抽取封裝文件上傳組件,可供所有的文件的操作。

          后端框架

          版本

          SpringBoot

          2.5.6

          Spring-Cloud

          2020.0.4

          mysql

          8.0.26

          pagehelper

          1.3.1

          Mybatis

          2.2.0

          Redis

          5.0

          Fastjson

          1.2.78

          前端框架

          版本

          Vue

          2.6.11

          axios

          0.24.0

          vue-router

          3.5.3

          Bootstrap

          4.6.2

          文章目錄

          一、前端部分
          1. 講師頁面

          講師頁面作為文件上傳父頁面

          <div class="form-group">
          <label class="col-sm-2 control-label">頭像</label>
          <div class="col-sm-10">
          <file v-bind:input-id="'image-upload'"
          v-bind:text="'上傳頭像'"
          v-bind:suffixs="['jpg', 'jpeg', 'png']"
          v-bind:use="FILE_USE.TEACHER.key"
          v-bind:after-upload="afterUpload"></file>
          <div v-show="teacher.image" class="row">
          <div class="col-md-4">
          <img v-bind:src="teacher.image" class="img-responsive">
          </div>
          </div>

          </div>
          </div>
          2. js部分
          <script>
          import File from "../../components/file";
          export default {
          components: {Pagination, BigFile,File},
          name: "business-teacher",
          data: function () {
          return {
          teacher: {},
          teachers: [],
          FILE_USE: FILE_USE,
          }
          },

          methods: {
          /**
          * 點擊【新增】
          */
          add() {
          let _this = this;
          _this.teacher = {};
          $("#form-modal").modal("show");
          },

          /**
          * 點擊【編輯】
          */
          edit(teacher) {
          let _this = this;
          _this.teacher = $.extend({}, teacher);
          $("#form-modal").modal("show");
          },

          /**
          * 列表查詢
          */
          list(page) {
          let _this = this;
          Loading.show();
          _this.$api.post(process.env.VUE_APP_SERVER + '/business/admin/teacher/list', {
          page: page,
          size: _this.$refs.pagination.size,
          }).then((response) => {
          Loading.hide();
          let resp = response.data;
          _this.teachers = resp.content.list;
          _this.$refs.pagination.render(page, resp.content.total);

          })
          },

          /**
          * 點擊【保存】
          */
          save() {
          let _this = this;

          // 保存校驗
          if (1 != 1
          || !Validator.require(_this.teacher.name, "姓名")
          || !Validator.length(_this.teacher.name, "姓名", 1, 50)
          || !Validator.length(_this.teacher.nickname, "昵稱", 1, 50)
          || !Validator.length(_this.teacher.image, "頭像", 1, 100)
          || !Validator.length(_this.teacher.position, "職位", 1, 50)
          || !Validator.length(_this.teacher.motto, "座右銘", 1, 50)
          || !Validator.length(_this.teacher.intro, "簡介", 1, 500)
          ) {
          return;
          }

          Loading.show();
          _this.$api.post(process.env.VUE_APP_SERVER + '/business/admin/teacher/save', _this.teacher).then((response) => {
          Loading.hide();
          let resp = response.data;
          if (resp.success) {
          $("#form-modal").modal("hide");
          _this.list(1);
          Toast.success("保存成功!");
          } else {
          Toast.warning(resp.message)
          }
          })
          },
          afterUpload(resp) {
          let _this = this
          let image = resp.content.path;
          _this.teacher.image = image
          }
          }
          }
          </script>
          3. 文件上傳組件
          <template>
          <div>
          <button type="button" v-on:click="selectFile()" class="btn btn-white btn-default btn-round">
          <i class="ace-icon fa fa-upload"></i>
          {{text}}
          </button>
          <input class="hidden" type="file" ref="file" v-on:change="uploadFile()" v-bind:id="inputId+'-input'">
          </div>a
          </template>

          <script>
          export default {
          name: 'file',
          props: {
          text: {
          default: "上傳文件"
          },
          inputId: {
          default: "file-upload"
          },
          suffixs: {
          default: []
          },
          use: {
          default: ""
          },
          afterUpload: {
          type: Function,
          default: null
          },
          },
          data: function () {
          return {
          }
          },
          methods: {
          uploadFile () {
          let _this = this;
          let formData = new window.FormData();
          let file = _this.$refs.file.files[0];

          // 判斷文件格式
          let suffixs = _this.suffixs;
          let fileName = file.name;
          let suffix = fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length).toLowerCase();
          let validateSuffix = false;
          for (let i = 0; i < suffixs.length; i++) {
          if (suffixs[i].toLowerCase() === suffix) {
          validateSuffix = true;
          break;
          }
          }
          if (!validateSuffix) {
          Toast.warning("文件格式不正確!只支持上傳:" + suffixs.join(","));
          $("#" + _this.inputId + "-input").val("");
          return;
          }

          // key:"file"必須和后端controller參數名一致
          formData.append('file', file);
          formData.append('use', _this.use);
          Loading.show()
          _this.$api.post(process.env.VUE_APP_SERVER + '/file/admin/oss-simple', formData).then((response) => {
          Loading.hide()

          let resp = response.data
          console.log("上傳文件成功:", resp)

          //回調父組件函數
          _this.afterUpload(resp)

          //解決 同一個文件上傳2次或者大于3次,不會發生變化
          $("#" + _this.inputId + "-input").val("");
          })
          },

          selectFile() {
          let _this = this
          // console.log("_this.inputId",_this.inputId)
          $("#" + _this.inputId + "-input").trigger("click");
          }
          },
          }
          </script>

          <style scoped>
          </style>
          二、阿里云OSS

          官網:??https://www.aliyun.com??

          2.1. 注冊阿里云

          ??https://account.aliyun.com/register/register.htm??

          Vue Bootstrap OSS 實現文件上傳_文件上傳_04

          2.2. 開通OSS

          Vue Bootstrap OSS 實現文件上傳_文件上傳_05


          Vue Bootstrap OSS 實現文件上傳_vue.js_06

          2.3. 進入管控臺

          Vue Bootstrap OSS 實現文件上傳_vue.js_07


          Vue Bootstrap OSS 實現文件上傳_bootstrap_08

          2.4. 創建 Bucket

          Vue Bootstrap OSS 實現文件上傳_vue.js_09

          讀寫權限選擇【公共讀】,意思是都可以或者有權限看,沒其他特殊請求,其他的保持默認,點擊確定即可

          Vue Bootstrap OSS 實現文件上傳_vue.js_10


          Vue Bootstrap OSS 實現文件上傳_spring boot_11

          2.5. 創建OSS用戶

          Vue Bootstrap OSS 實現文件上傳_spring_12


          或者

          Vue Bootstrap OSS 實現文件上傳_文件上傳_13


          Vue Bootstrap OSS 實現文件上傳_spring_14


          Vue Bootstrap OSS 實現文件上傳_vue.js_15

          2.6. OSS權限

          Vue Bootstrap OSS 實現文件上傳_spring boot_16


          Vue Bootstrap OSS 實現文件上傳_spring_17

          三、OSS Client開發文檔

          ??https://www.aliyun.com/product/oss??

          3.1. OSS Client SDK

          開發語言java,簡單文上傳

          Vue Bootstrap OSS 實現文件上傳_文件上傳_18


          Vue Bootstrap OSS 實現文件上傳_vue.js_19

          3.2. 概述

          Vue Bootstrap OSS 實現文件上傳_vue.js_20

          3.3. SDK Client

          這里就是官網提供的java語言的SDK Client

          Vue Bootstrap OSS 實現文件上傳_spring boot_21

          四、后端部分

          ??https://help.aliyun.com/document_detail/32009.html??

          4.1.依賴引入

          Vue Bootstrap OSS 實現文件上傳_vue.js_22

          <!-- OSS Java SDK -->
          <dependency>
          <groupId>com.aliyun.oss</groupId>
          <artifactId>aliyun-sdk-oss</artifactId>
          <version>3.10.2</version>
          </dependency>
          4.2. 配置
          # 應用名稱
          spring.application.name=file
          # 應用端口
          server.port=9003
          # 注冊到eureka
          eureka.client.service-url.defaultZone=http://localhost:8761/eureka

          # 請求訪問前綴
          server.servlet.context-path=/file

          # 本地存儲靜態文件路徑
          file.path=D:/file/imooc/course/
          # 訪問靜態文件路徑(用于文件回顯或者文件下載)
          file.domain=http://127.0.0.1:9000/file/f/

          # 文件大?。ㄈ绻罱ù笮〕^此配置的大小或拋出異常)
          spring.servlet.multipart.max-file-size=50MB
          # 請求大小
          spring.servlet.multipart.max-request-size=50MB


          # OSS 配置
          oss.accessKeyId=xxx
          oss.accessKeySecret=xxx
          oss.endpoint=http://oss-cn-beijing.aliyuncs.com
          oss.ossDomain=http://bucket名稱.oss-cn-beijing.aliyuncs.com/
          oss.bucket=xxx
          • oss.endpoint 和oss.ossDomain獲取方式
          • Vue Bootstrap OSS 實現文件上傳_vue.js_23

          • bucket 獲取方式
          • Vue Bootstrap OSS 實現文件上傳_文件上傳_24

          • oss.accessKeyId和oss.accessKeySecret獲取方式

          Vue Bootstrap OSS 實現文件上傳_spring_25


          Vue Bootstrap OSS 實現文件上傳_spring_26


          Vue Bootstrap OSS 實現文件上傳_文件上傳_27

          4.3. api接口
          package com.course.file.controller;

          import com.alibaba.fastjson.JSON;
          import com.aliyun.oss.OSS;
          import com.aliyun.oss.OSSClientBuilder;
          import com.aliyun.oss.model.AppendObjectRequest;
          import com.aliyun.oss.model.AppendObjectResult;
          import com.aliyun.oss.model.ObjectMetadata;
          import com.aliyun.oss.model.PutObjectRequest;
          import com.aliyuncs.DefaultAcsClient;
          import com.aliyuncs.vod.model.v20170321.GetMezzanineInfoResponse;
          import com.course.server.dto.FileDto;
          import com.course.server.dto.ResponseDto;
          import com.course.server.enums.FileUseEnum;
          import com.course.server.service.FileService;
          import com.course.server.util.Base64ToMultipartFile;
          import com.course.server.util.UuidUtil;
          import com.course.server.util.VodUtil;
          import org.slf4j.Logger;
          import org.slf4j.LoggerFactory;
          import org.springframework.beans.factory.annotation.Value;
          import org.springframework.util.StringUtils;
          import org.springframework.web.bind.annotation.*;
          import org.springframework.web.multipart.MultipartFile;

          import javax.annotation.Resource;
          import java.io.ByteArrayInputStream;

          @RequestMapping("/admin")
          @RestController
          public class OssController {
          public static final Logger LOG = LoggerFactory.getLogger(OssController.class);
          public static final String BUSINESS_NAME = "文件上傳";

          @Value("${oss.accessKeyId}")
          private String accessKeyId;

          @Value("${oss.accessKeySecret}")
          private String accessKeySecret;

          @Value("${oss.endpoint}")
          private String endpoint;

          @Value("${oss.bucket}")
          private String bucket;

          @Value("${oss.ossDomain}")
          private String ossDomain;


          /**
          * oss簡單上傳
          *
          * @param file
          * @param use
          * @return
          * @throws Exception
          */
          @PostMapping("/oss-simple")
          public ResponseDto fileUpload(@RequestParam MultipartFile file, String use) throws Exception {
          LOG.info("上傳文件開始");

          //接收前端的歸屬文件類型 COURSE("C", "課程"), TEACHER("T", "講師");
          FileUseEnum useEnum = FileUseEnum.getByCode(use);

          // 為了支持一個文件上傳多次,展示歷史的不同版本,因此上傳文件前,統一添加文件前綴,下載時,統一截取文件沒那個前8位處理
          String key = UuidUtil.getShortUuid();
          //獲取文件名
          String fileName = file.getOriginalFilename();
          //獲取按照文件類型存儲的目錄
          String dir = useEnum.name().toLowerCase();
          //文件存儲目錄拼接 /teacher/1.jpeg
          String path = dir + "/" + key + fileName;

          // 創建OSSClient實例。
          OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

          // 創建PutObjectRequest對象。
          //String content = "Hello OSS";
          // <yourObjectName>表示上傳文件到OSS時需要指定包含文件后綴在內的完整路徑,例如abc/efg/123.jpg。
          PutObjectRequest putObjectRequest = new PutObjectRequest(bucket, path, new ByteArrayInputStream(file.getBytes()));

          // 如果需要上傳時設置存儲類型與訪問權限,請參考以下示例代碼。
          // ObjectMetadata metadata = new ObjectMetadata();
          // metadata.setHeader(OSSHeaders.OSS_STORAGE_CLASS, StorageClass.Standard.toString());
          // metadata.setObjectAcl(CannedAccessControlList.Private);
          // putObjectRequest.setMetadata(metadata);

          // 上傳字符串
          ossClient.putObject(putObjectRequest);
          // 關閉OSSClient
          ossClient.shutdown();;

          ResponseDto responseDto = new ResponseDto();
          FileDto fileDto = new FileDto();
          fileDto.setPath(ossDomain + path);
          responseDto.setContent(fileDto);

          return responseDto;
          }
          }


          本文摘自 :https://blog.51cto.com/g

          97久久久久人妻精品专区_国产成人精品视频导航_国产色诱视频在线播放网站_97午夜理论电影影院
          <p id="g32nn"></p>
          1. <acronym id="g32nn"><strong id="g32nn"></strong></acronym>
            <pre id="g32nn"></pre>

            <table id="g32nn"><option id="g32nn"></option></table>