2. 程式人生 > >Vue開發——封裝上傳檔案元件

Vue開發——封裝上傳檔案元件

阿新 • • 發佈：2019-02-13
使用elementui的 el-upload外掛實現圖片上傳元件每個專案存在一定的特殊性，所以資料的處理會不同 pictureupload.vue:<template>    <div class="pictureupload">        <el-upload                :action="baseUrl + '/api/public/image'"                list-type="picture-card"                :on-preview="handlePictureCardPreview"                :on-remove="handleRemove"                :file-list
="fileList"                :on-exceed="handleExceed"                :before-remove="beforeRemove"                name="img"                :on-success="upLoadSuccess"                :data="upLoadData"                :headers="headers"                :limit="limit">            <i class="el-icon-plus"
></i>        </el-upload>        <el-dialog :visible.sync="dialogVisible">            <img width="100%" :src="dialogImageUrl" alt="">        </el-dialog>    </div></template><script>import { getToken } from "@/utils/auth";import store from "@/store";export default
{    props: {        imgList: {            type: Array,            default: []        }, // 父元件傳遞的圖片列表        limit: "" // 圖片數量限制    },    data() {        return {            fileList: [],            upLoadData: {                img: ""            },            baseUrl: process.env.BASE_API,            dialogVisible: false,            dialogImageUrl: "",            headers: {                Authorization: store.getters.token_type + " " + store.getters.token            } // 介面呼叫token        };    },    watch: {        // 監聽imgList的變化： fileList要求的格式為[{url: img}],所以監聽imgList變化後將其進行處理，賦值給fileList        imgList: {            handler(newValue, oldValue) {                if(newValue.length === 0) {                    this.fileList = [];                    return;                }                for (let i = 0; i < newValue.length; i++) {                    if (oldValue[i] != newValue[i]) {                        this.fileList = [];                        newValue.forEach(el => {                            this.fileList.push({url: el})                        })                        return;                    }                }            },            deep: true        }    },    methods: {        // 圖片移除時處理資料        handleRemove(file, fileList) {            let item = [];            fileList.forEach(el => {                item.push(el.url);            });            this.$emit("removeimg", item);        },        handlePictureCardPreview(file) {            this.dialogImageUrl = file.url;            this.dialogVisible = true;        },        // 判斷圖片數量        handleExceed(files, fileList) {            this.$message.warning(`當前限制選擇 ${this.limit} 個檔案，本次選擇了 ${files.length} 個檔案，共選擇了 ${files.length + fileList.length} 個檔案`);        },        beforeRemove(file, fileList) {},        // 上傳圖片成功事件        upLoadSuccess(response) {            this.$emit("uploadimg", response.message);            this.$message("上傳成功",);        }    },    mounted() {        if (this.imgList.length != 0) {            this.imgList.forEach(el => {                this.fileList.push({ url: el });            });        }    }};</script>使用上傳圖片元件：<pictureupload @uploadimg="uploadimg" :imgList="ruleForm.img" :limit="3" @removeimg="removeimg"></pictureupload>removeimg(item) {    this.ruleForm.img = item;},uploadimg(item) {    this.ruleForm.img.push(item);},

相關推薦

Vue開發——封裝上傳檔案元件

使用elementui的 el-upload外掛實現圖片上傳元件每個專案存在一定的特殊性，所以資料的處理會不同 pictureupload.vue:<template>    <div

在Vue中封裝一個上傳檔案元件

封裝一個上傳檔案的元件，如下： 使用<input type='file'> 來實現檔案上傳，具體操作參照以往JS版的實現 這裡主要說作為一個元件，選中檔案之後，在輸入框中顯示檔名稱，點選Submit將將檔案傳給父元件，再由父元件提價到後臺

基於vue element 封裝上傳元件

 基於vue element封裝的上傳元件 使用方法： 1.首先引入該元件 2.註冊元件 3.頁面使用 4.回撥函式（如需其他回撥自行封裝 因為我暫時沒用到其他的  哈哈哈）   <template>

vue axios 實現上傳檔案

1 新建一個用來上傳檔案的axios，不同普通請求後臺的axios，因為上傳檔案不能手動設定請求頭      var uploadAxios = axios.create({}),       Vue.prototype.$uploadAxios = uploadAxio

vue 日誌顯示上傳檔案的內容

html <label for="fileInput"> <i class="fa fa-folder-open-o" aria-hidden="true"></i> </label> <input v-show="false"

linux-arm筆記2:如何在ubuntu上安裝ftp，並且用ftp向arm開發板上傳檔案

[email protected]:~$ ftp 192.168.1.109    //arm開發板ip Connected to 192.168.1.109. 220 FriendlyARM FTP server (Version 6.4/OpenBSD/Linux-ftpd-0.17) read

vue-resource+iview上傳檔案取消上傳

vue-resource+iview上傳檔案取消上傳 子元件： <template> <div class="upload-area-div"> <Upload :type="upType" class="upload-area"

【bootstrap】bootstrap上傳檔案元件

引入相關bootstrap檔案連結 <link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <link rel="styles

vue element-ui 上傳檔案到七牛雲

很多人對於上傳檔案還是有一定的恐懼感，作為一個前端工程師來說，好像上傳就應該來後端去做，但今天，我想給大家推薦寫一下自己使用vue上傳檔案的心得，可以使用vue就可以直接上傳到七牛雲，寫的不好勿噴。其實接觸vue的時間並不長，以前都用的是ng,但mvvm框架學起來還是比較好學

vue 使用 axios 上傳檔案 --- FormData

       在此主要介紹 如何使用 formData 物件上傳單檔案和多檔案，FormData 就是 XMLHttpRequest Level 2 新增的一個物件，利用它來提交表單、模擬表單提交，當然最大的優勢就是可以上傳二進位制檔案。       過多介紹不說，過多的煽情

vue的Element元件上傳檔案el-upload上傳成功後清空

<el-upload action="#" ref="upload" list-type="picture" :show-file-list="true" :limit="1" :http-req

VUE 爬坑之旅 -- 封裝一個簡單的獲取本地圖片並壓縮上傳的元件

平時專案開發中，獲取本地圖片並壓縮上傳是一個很常見的需求，最典型的就是修改使用者頭像功能，今天就來封裝一個可以到處通過的元件。 首先分析需求，要達到什麼效果呢？ 點選後開啟檔案選擇器，選擇檔案 對獲取的圖片檔案壓縮 前端能夠預覽獲取到的圖片 將壓縮後的圖片

vue + elementUi + upLoadIamge元件 上傳檔案到阿里雲oss

<template> <div class="upLoadIamge"> <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="pictu

TERSUS畫畫一樣開發軟件 顯示元件介紹-上傳顯示元件

軟件開發管理軟件無代碼軟件開發TERSUS無代碼手機電腦管理類軟件開發，其中上傳類顯示元件包括：表單元件（Form）、文件上傳框元件（File Field） 表單元件（Form）：是一個提交信息的元件，類似一個輸入框套嵌的容器，可以點右鍵添加4類帶標簽的輸入框元件，隨意添加多個，然後再定義各元件的顯示樣式即即

上傳檔案iView元件

<Upload                  ref="upload"                 :before-

Hbuilder開發app實戰-識歲04-七牛雲上傳檔案的js實現

七牛雲上傳 七牛雲的上傳支援很多種語言，我用過的有java和js，個人感覺都比較方便， 當然java要比js方便一點吧，由於是app中要上傳到七牛雲，所以不可能使用java， 就看拉看七牛雲的js上傳，詳見這裡：http://developer.qiniu.com/docs/v6/api/o

使用第三方元件實現上傳檔案

使用第三方元件實現上傳檔案功能需要在專案lib下目錄匯入兩個Jar包(commons-fileupload 和  commons-io) commons-io下載地址:http://commons.apache.org/proper/commons-io/download_i

tornado+vue實現上傳檔案

要用tornado+vue寫一個後臺管理系統，記錄一下遇到檔案上傳時候的步驟： 1.Form表單裡的程式碼：(這裡是使用的餓了麼表單元件) <el-form-item label="頭像"> <el-upload

微信公眾平臺開發(80) 上傳下載多媒體檔案

微信公眾賬號在回覆圖片、語音、視訊的時候，將使用media_id來呼叫相關檔案，很多朋友諮詢這個如何開發實現。本文將介紹在微信公眾平臺開發過程中，如何上傳下載多媒體檔案。   一、上傳多媒體檔案 公眾號可呼叫本介面來上傳圖片、語音、視訊等檔案到微信伺服器，上傳後伺服器會

Bootstrap之fileinput檔案上傳控制元件

 前言~ 前段時間做專案用到了bootstrap裡中的檔案上傳控制元件，對此特定寫這篇文章，講述一下bootstrap的檔案上傳空間的使用方法。 我們進入正題吧！        首先bootstrap是基於jquery的，因此要匯入