| | |
| | | <template> |
| | | <div class="upload-file"> |
| | | <el-upload |
| | | multiple |
| | | :action="uploadFileUrl" |
| | | :before-upload="handleBeforeUpload" |
| | | :file-list="fileList" |
| | | :limit="limit" |
| | | :on-error="handleUploadError" |
| | | :on-exceed="handleExceed" |
| | | :on-success="handleUploadSuccess" |
| | | :show-file-list="false" |
| | | :headers="headers" |
| | | class="upload-file-uploader" |
| | | ref="fileUploadRef" |
| | | > |
| | | <!-- 上传按钮 --> |
| | | <el-button type="primary">选取文件</el-button> |
| | | </el-upload> |
| | | <!-- 上传提示 --> |
| | | <div class="el-upload__tip" v-if="showTip"> |
| | | 请上传 |
| | | <template v-if="fileSize"> |
| | | 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> |
| | | </template> |
| | | <template v-if="fileType"> |
| | | 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> |
| | | </template> |
| | | 的文件 |
| | | </div> |
| | | <!-- 文件列表 --> |
| | | <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul"> |
| | | <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList"> |
| | | <el-link :href="`${file.url}`" :underline="false" target="_blank"> |
| | | <span class="el-icon-document"> {{ getFileName(file.name) }} </span> |
| | | </el-link> |
| | | <div class="ele-upload-list__item-content-action"> |
| | | <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link> |
| | | </div> |
| | | </li> |
| | | </transition-group> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import { getToken } from "@/utils/auth"; |
| | | import { listByIds, delOss } from "@/api/system/oss"; |
| | |
| | | return strs != "" ? strs.substring(0, strs.length - 1) : ""; |
| | | } |
| | | </script> |
| | | |
| | | <template> |
| | | <div class="upload-file"> |
| | | <el-upload |
| | | multiple |
| | | :action="uploadFileUrl" |
| | | :before-upload="handleBeforeUpload" |
| | | :file-list="fileList" |
| | | :limit="limit" |
| | | :on-error="handleUploadError" |
| | | :on-exceed="handleExceed" |
| | | :on-success="handleUploadSuccess" |
| | | :show-file-list="false" |
| | | :headers="headers" |
| | | class="upload-file-uploader" |
| | | ref="fileUploadRef" |
| | | > |
| | | <!-- 上传按钮 --> |
| | | <el-button type="primary">选取文件</el-button> |
| | | </el-upload> |
| | | <!-- 上传提示 --> |
| | | <div class="el-upload__tip" v-if="showTip"> |
| | | 请上传 |
| | | <template v-if="fileSize"> |
| | | 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> |
| | | </template> |
| | | <template v-if="fileType"> |
| | | 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> |
| | | </template> |
| | | 的文件 |
| | | </div> |
| | | <!-- 文件列表 --> |
| | | <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul"> |
| | | <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList"> |
| | | <el-link :href="`${file.url}`" :underline="false" target="_blank"> |
| | | <span class="el-icon-document"> {{ getFileName(file.name) }} </span> |
| | | </el-link> |
| | | <div class="ele-upload-list__item-content-action"> |
| | | <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link> |
| | | </div> |
| | | </li> |
| | | </transition-group> |
| | | </div> |
| | | </template> |
| | | |
| | | <style scoped lang="scss"> |
| | | .upload-file-uploader { |