|
@@ -4,10 +4,10 @@
|
|
|
<el-upload class="upload" drag :before-upload="BeforeUpload" :file-list="[]" action=""
|
|
|
accept=".jpg,.jpeg,.png,.bmp,.pdf">
|
|
|
<i class="el-icon-upload"></i>
|
|
|
+ <div class="file-name" v-if="fileName">{{ fileName }}</div>
|
|
|
<div class="upload-text">点击或拖拽上传文件</div>
|
|
|
</el-upload>
|
|
|
</div>
|
|
|
- <div class="file-name" v-if="fileName">{{ fileName }}</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -17,6 +17,7 @@ import { usePdfProperty } from '../store/PdfProperty';
|
|
|
import { storeToRefs } from 'pinia'
|
|
|
import { fabric } from 'fabric';
|
|
|
import { ref, onMounted } from 'vue'
|
|
|
+import { defineExpose } from 'vue'
|
|
|
|
|
|
const fileName = ref("")
|
|
|
|
|
@@ -47,57 +48,54 @@ const { is_pdf, pdf_source } = storeToRefs(pdf_property);
|
|
|
|
|
|
function handleDrop(e: any) {
|
|
|
e.preventDefault()
|
|
|
- // console.log(support_format)
|
|
|
+ console.log('handleDrop')
|
|
|
const files = e.dataTransfer.files
|
|
|
if (files.length > 0) {
|
|
|
const file = files[0]
|
|
|
- const post_ = file.name.substring(file.name.lastIndexOf("."), file.name.length).toLowerCase();
|
|
|
- if (support_format.includes(post_)) {
|
|
|
- UpdateFile(file)
|
|
|
- } else {
|
|
|
- alert('不支持的文件格式!')
|
|
|
- }
|
|
|
+ UpdateFile(file)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const BeforeUpload = (file: File): boolean | Promise<boolean> => {
|
|
|
- const post_ = file.name.substring(file.name.lastIndexOf("."), file.name.length).toLowerCase();
|
|
|
- if (support_format.includes(post_)) {
|
|
|
- UpdateFile(file)
|
|
|
- } else {
|
|
|
- alert('不支持的文件格式!')
|
|
|
- }
|
|
|
- return true;
|
|
|
+ console.log('BeforeUpload')
|
|
|
+ return UpdateFile(file);
|
|
|
}
|
|
|
|
|
|
function UpdateFile(file: File) {
|
|
|
- if (fabric_canvas.value != null) {
|
|
|
- fabric_canvas.value.dispose();
|
|
|
- fabric_canvas.value = null;
|
|
|
- }
|
|
|
- fileName.value = file.name;
|
|
|
const post_ = file.name.substring(file.name.lastIndexOf("."), file.name.length).toLowerCase();
|
|
|
- if (post_ == ".pdf") {
|
|
|
- if (props.isConvert == true) {
|
|
|
- input_file.value = file;
|
|
|
- } else {
|
|
|
- is_pdf.value = true;
|
|
|
- pdf_source.value = URL.createObjectURL(file);
|
|
|
+ if (support_format.includes(post_)) {
|
|
|
+ if (fabric_canvas.value != null) {
|
|
|
+ fabric_canvas.value.dispose();
|
|
|
+ fabric_canvas.value = null;
|
|
|
}
|
|
|
- } else if (post_ == ".jpg" || post_ == ".png" || post_ == ".bmp" || post_ == ".jpeg") {
|
|
|
- is_pdf.value = false
|
|
|
- if (show_image.value != null && show_canvas.value != null) {
|
|
|
- show_image.value.src = URL.createObjectURL(file);
|
|
|
- show_image.value.onload = () => {
|
|
|
- show_canvas.value.width = show_image.value.width;
|
|
|
- show_canvas.value.height = show_image.value.height;
|
|
|
- fabric_canvas.value = new fabric.Canvas(show_canvas.value);
|
|
|
- fabric_canvas.value.clear()
|
|
|
+ fileName.value = file.name;
|
|
|
+ if (post_ == ".pdf") {
|
|
|
+ is_pdf.value = true;
|
|
|
+ if (props.isConvert == true) {
|
|
|
+ input_file.value = file;
|
|
|
+ } else {
|
|
|
+ pdf_source.value = URL.createObjectURL(file);
|
|
|
+ }
|
|
|
+ } else if (post_ == ".jpg" || post_ == ".png" || post_ == ".bmp" || post_ == ".jpeg") {
|
|
|
+ is_pdf.value = false
|
|
|
+ if (show_image.value != null && show_canvas.value != null) {
|
|
|
+ show_image.value.src = URL.createObjectURL(file);
|
|
|
+ show_image.value.onload = () => {
|
|
|
+ show_canvas.value.width = show_image.value.width;
|
|
|
+ show_canvas.value.height = show_image.value.height;
|
|
|
+ fabric_canvas.value = new fabric.Canvas(show_canvas.value);
|
|
|
+ fabric_canvas.value.clear()
|
|
|
+ }
|
|
|
}
|
|
|
+ input_file.value = file;
|
|
|
}
|
|
|
- input_file.value = file;
|
|
|
+ } else {
|
|
|
+ alert('不支持的文件格式!')
|
|
|
}
|
|
|
+ return true;
|
|
|
}
|
|
|
+
|
|
|
+defineExpose({ UpdateFile })
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|