There are some difficulties in uploading pictures. After thinking, the solutions are as follows:

Realization of uploading picture function

<div class="upload">
            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3"
              :on-exceed="handleExceed" :file-list="fileList" :before-upload="beforeAvatarUpload">
              <el-button type="danger">upload</el-button>
            </el-upload>
            <el-button type="danger" @click="mUpload">mobile phone</el-button>
          </div>

Computer upload

Verify the format and size before uploading the file. After uploading the picture, use the previously maintained values for setting the brush, line width and eraser. When returning, restore the selected values

const beforeAvatarUpload = (rawFile) => {
  // Default jpg
  // Default 5M
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Only picture formats are supported!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 5) {
    ElMessage.error('Pictures cannot exceed 5 MB!')
    return false
  }
  return true
}

Mobile upload

Mobile uploading is one of the difficulties in development. There are four schemes under consideration

1. there is an account system. It is better to have ws communication between the back end and the front end, or the front end polls the back end every second. When scanning the code, both the mobile phone and the pc should log in;

2. or after scanning the code and uploading, after the back end is identified, it is written into the database, and the web page can query the database information

If you want to log in without feeling, you'd better use the wechat applet or the official account account system

All users need to use the account system and wechat interface. Users can log in without feeling, but the intervention is complex,
There is no wechat interface, and you need to register and log in manually.

3. without the account system, a random code is generated when the mobile phone uploads, and the random code is input into the web page to obtain it. This method is simpler, but there is a risk of information leakage. As long as the random code is obtained, the identified information can be obtained. It is necessary to create an additional web page B, scan the mobile phone code to enter web page B, click upload, identify and save in the background, and return the random code to the mobile phone.

For the above three schemes, the account function of wechat login is considered for the first time, and some progress has been made in the code. However, when using the user to log in to the system, considering the convenience of use, the third solution is proposed in order not to log in every time. However, the third solution has information leakage during uploading and the efficiency is affected by entering the identification code every time, so the fourth solution is produced:

Scheme 4: variant of random code

1. Click mobile upload on PC
2. Obtain the verification code at the back end, splice the verification code at the back of the web page, and generate a two-dimensional code according to the verification code and certain rules
3. Wechat scanning code
4. Wechat upload

At this time, the image and the corresponding verification code are uploaded to the backend

5. After code scanning and uploading, the pc end polls the back end every 5s to see whether the uploading is successful. If it is successful, the pop-up window (2D code) will be closed
6. The backend stores the verification code, uploaded pictures, and identification results
7. According to the verification code in step 2, the PC queries the results returned from the background. If there is any result, it will display it. If there is no result, it will always poll and set the clear timer code to prevent errors.

Relevant code, generate QR code

const dialogTableVisible = ref(false)
const url = ref('http://192.168.1.31:8080/')
const timer = ref(null)
const mUpload = async () => {
  // todo: background get verification code
   let resCode = await axiso.post('xxxxxxxxx/getUid')
   url.value = `xxxxxxxxx/${resCode.uid}`
   dialogTableVisible.value = true
       if (timer.value) {
       clearInterval(timer.value)  // Clear timer
       timer.value = null  // Clear timer
     }
     timer.value = setInterval(() => {
       let res = getUidRes(resCode.uid)
      if (res.code == 0) {
         clearInterval(timer.value)  // Clear timer
         timer.value = null // Clear timer
         dialogTableVisible.value = false // Close Popup

5s polling code

   const getUidRes = async (uid) => {
   let res = await axiso.post('xxxxxxxxx/getUidRes', { uid: uid })
     return res
   }