Vue電商后台管理系統項目第7篇-文件上傳組件和富文本框

本文轉載自查看原文 2019-10-06 16:30 326 Vue電商后台管理系統項目第7篇-文件上傳組件和富文本框/ Vue

文件上傳組件

<el-upload
           class="upload-demo" // 類樣式
           action="https://jsonplaceholder.typicode.com/posts/" // 文件上傳的目標路徑
           :on-preview="handlePreview" // 單擊預覽時觸發的操作，單擊圖片鏈接實現預覽
           :on-remove="handleRemove" // 移除時觸發的事件
           :file-list="fileList2" // 當前用戶所選擇的文件列表，后期這個列表中的數據會上傳到服務器
           list-type="picture" // 類型
           >
    <el-button size="small" type="primary">點擊上傳</el-button>
    <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div>
</el-upload>

接口上傳地址：action:http://localhost:8888/api/private/v1/upload

使用文件上傳組件實現文件上傳操作

接收上傳成功之后的返回值
將返回值中的指定的數據存儲到goodsForm的指定屬性中：pics
注冊接口文檔中關於圖片參數的格式說明

細節1：token的傳遞

upload文件上傳組件內部自己封裝的異步操作
意味着它並不是使用我們之前自己封裝的axios
意味着我們之前自己添加的攔截器並沒有能夠起到作用
意味着我們在攔截器中設置了token值的傳遞其實並沒有用
結論：我們需要自己手動添加token值的傳遞
token值的傳遞通過請求頭的方式進行傳遞

請求頭必須使用Authorization來進行傳遞 Authorization:token，獲取token:localStorage，設置請求頭：組件自帶的headers來設置請求頭；

action="http://localhost:8888/api/private/v1/upload"
-----------------------
// 設置請求頭傳遞token
getToken () {
    var token = localStorage.getItem('itcast_pro_token')
    return { 'Authorization': token }
}

細節2：移除時必須將之前添加到pics中的圖片對象移除

// 移除
handleRemove (file, fileList) {
    // file就是當前你移除的文件
    var filename = file.response.data.tmp_path
    // 我們要根據 file里面的數據刪除this.goodsForm.pics中的數據
    for (var i = 0; i < this.goodsForm.pics.length; i++) {
        if (this.goodsForm.pics[i].pic === filename) {
            this.goodsForm.pics.splice(i, 1)
            break
        }
    }
}

富文本框插件使用

下載安裝：npm install vue-quill-editor --save

引入富文本框插件

注冊組件

import VueQuillEditor from 'vue-quill-editor'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor)

使用富文本框插件

<el-tab-pane label="商品描述" name="2">
    <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" style='height:300px'></quill-editor>
</el-tab-pane>

添加商品信息

添加一個添加商品的button按鈕，綁定一個事件；

// 添加商品信息
addGoods () {
    console.log(this.goodsForm)
    addGoodsInfo(this.goodsForm)
        .then(res => {
        console.log(res)
        if (res.data.meta.status === 201) {
            this.$message({
                type: 'success',
                message: res.data.meta.msg
            })
            this.$router.push({ name: 'List' })
        }
    })
        .catch(err => {
        console.log(err)
    })
}