index.vue 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  1. <template>
  2. <div class="upload-file">
  3. <el-upload
  4. multiple
  5. :action="uploadFileUrl"
  6. :before-upload="handleBeforeUpload"
  7. :file-list="fileList"
  8. :limit="limit"
  9. :on-error="handleUploadError"
  10. :on-exceed="handleExceed"
  11. :on-success="handleUploadSuccess"
  12. :show-file-list="false"
  13. :headers="headers"
  14. class="upload-file-uploader"
  15. ref="fileUpload"
  16. >
  17. <!-- 上传按钮 -->
  18. <el-button size="mini" type="primary">选取文件</el-button>
  19. <!-- 上传提示 -->
  20. <div class="el-upload__tip" slot="tip" v-if="showTip">
  21. 请上传
  22. <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
  23. <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
  24. 的文件
  25. </div>
  26. </el-upload>
  27. <!-- 文件列表 -->
  28. <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
  29. <li :key="file.url" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
  30. <el-link :href="`${file.url}`" :underline="false" target="_blank">
  31. <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
  32. </el-link>
  33. <div class="ele-upload-list__item-content-action">
  34. <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
  35. </div>
  36. </li>
  37. </transition-group>
  38. </div>
  39. </template>
  40. <script>
  41. import { getToken } from "@/utils/auth";
  42. import { listByIds, delOss } from "@/api/system/oss";
  43. export default {
  44. name: "FileUpload",
  45. props: {
  46. // 值
  47. value: [String, Object, Array],
  48. // 数量限制
  49. limit: {
  50. type: Number,
  51. default: 5,
  52. },
  53. // 大小限制(MB)
  54. fileSize: {
  55. type: Number,
  56. default: 5,
  57. },
  58. // 文件类型, 例如['png', 'jpg', 'jpeg']
  59. fileType: {
  60. type: Array,
  61. default: () => ["doc", "xls", "ppt", "txt", "pdf"],
  62. },
  63. // 是否显示提示
  64. isShowTip: {
  65. type: Boolean,
  66. default: true
  67. }
  68. },
  69. data() {
  70. return {
  71. number: 0,
  72. uploadList: [],
  73. baseUrl: process.env.VUE_APP_BASE_API,
  74. uploadFileUrl: process.env.VUE_APP_BASE_API + "/system/oss/upload", // 上传的图片服务器地址
  75. headers: {
  76. Authorization: "Bearer " + getToken(),
  77. },
  78. fileList: [],
  79. };
  80. },
  81. watch: {
  82. value: {
  83. async handler(val) {
  84. if (val) {
  85. let temp = 1;
  86. // 首先将值转为数组
  87. let list;
  88. if (Array.isArray(val)) {
  89. list = val;
  90. } else {
  91. await listByIds(val).then(res => {
  92. list = res.data.map(oss => {
  93. oss = { name: oss.originalName, url: oss.url, ossId: oss.ossId };
  94. return oss;
  95. });
  96. })
  97. }
  98. // 然后将数组转为对象数组
  99. this.fileList = list.map(item => {
  100. item = { name: item.name, url: item.url, ossId: item.ossId };
  101. item.uid = item.uid || new Date().getTime() + temp++;
  102. return item;
  103. });
  104. } else {
  105. this.fileList = [];
  106. return [];
  107. }
  108. },
  109. deep: true,
  110. immediate: true
  111. }
  112. },
  113. computed: {
  114. // 是否显示提示
  115. showTip() {
  116. return this.isShowTip && (this.fileType || this.fileSize);
  117. },
  118. },
  119. methods: {
  120. // 上传前校检格式和大小
  121. handleBeforeUpload(file) {
  122. // 校检文件类型
  123. if (this.fileType) {
  124. let fileExtension = "";
  125. if (file.name.lastIndexOf(".") > -1) {
  126. fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
  127. }
  128. const isTypeOk = this.fileType.some((type) => {
  129. if (file.type.indexOf(type) > -1) return true;
  130. if (fileExtension && fileExtension.indexOf(type) > -1) return true;
  131. return false;
  132. });
  133. if (!isTypeOk) {
  134. this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
  135. return false;
  136. }
  137. }
  138. // 校检文件大小
  139. if (this.fileSize) {
  140. const isLt = file.size / 1024 / 1024 < this.fileSize;
  141. if (!isLt) {
  142. this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
  143. return false;
  144. }
  145. }
  146. this.$modal.loading("正在上传文件,请稍候...");
  147. this.number++;
  148. return true;
  149. },
  150. // 文件个数超出
  151. handleExceed() {
  152. this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
  153. },
  154. // 上传失败
  155. handleUploadError(err) {
  156. this.$modal.msgError("上传图片失败,请重试");
  157. this.$modal.closeLoading();
  158. },
  159. // 上传成功回调
  160. handleUploadSuccess(res, file) {
  161. if (res.code === 200) {
  162. this.uploadList.push({ name: res.data.fileName, url: res.data.url, ossId: res.data.ossId });
  163. this.uploadedSuccessfully();
  164. } else {
  165. this.number--;
  166. this.$modal.closeLoading();
  167. this.$modal.msgError(res.msg);
  168. this.$refs.fileUpload.handleRemove(file);
  169. this.uploadedSuccessfully();
  170. }
  171. },
  172. // 删除文件
  173. handleDelete(index) {
  174. let ossId = this.fileList[index].ossId;
  175. delOss(ossId);
  176. this.fileList.splice(index, 1);
  177. this.$emit("input", this.listToString(this.fileList));
  178. },
  179. // 上传结束处理
  180. uploadedSuccessfully() {
  181. if (this.number > 0 && this.uploadList.length === this.number) {
  182. this.fileList = this.fileList.concat(this.uploadList);
  183. this.uploadList = [];
  184. this.number = 0;
  185. this.$emit("input", this.listToString(this.fileList));
  186. this.$modal.closeLoading();
  187. }
  188. },
  189. // 获取文件名称
  190. getFileName(name) {
  191. // 如果是url那么取最后的名字 如果不是直接返回
  192. if (name.lastIndexOf("/") > -1) {
  193. return name.slice(name.lastIndexOf("/") + 1);
  194. } else {
  195. return name;
  196. }
  197. },
  198. // 对象转成指定字符串分隔
  199. listToString(list, separator) {
  200. let strs = "";
  201. separator = separator || ",";
  202. for (let i in list) {
  203. strs += list[i].ossId + separator;
  204. }
  205. return strs != "" ? strs.substr(0, strs.length - 1) : "";
  206. },
  207. },
  208. };
  209. </script>
  210. <style scoped lang="scss">
  211. .upload-file-uploader {
  212. margin-bottom: 5px;
  213. }
  214. .upload-file-list .el-upload-list__item {
  215. border: 1px solid #e4e7ed;
  216. line-height: 2;
  217. margin-bottom: 10px;
  218. position: relative;
  219. }
  220. .upload-file-list .ele-upload-list__item-content {
  221. display: flex;
  222. justify-content: space-between;
  223. align-items: center;
  224. color: inherit;
  225. }
  226. .ele-upload-list__item-content-action .el-link {
  227. margin-right: 10px;
  228. }
  229. </style>